css实现div多边框_box-shadow模拟多边框、outline描边实现

站长手记 作者: 2024-08-28 12:10:01
在css3中我们知道可以使用box-shadow属性轻松的为元素添加阴影效果,并且可以设置多组效果。把box-shadow特性的两个偏移量设置为0,将模糊值blur也设置为0,此时增加扩张半径,就会使元素的投影变为实线边框。

box-shadow语法:

box-shadow:x-shadow  y-shadow  blur  spread  color  inset;
  • x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。
  • y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。
  • blur:用于设置边框阴影半径大小。
  • spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。
  • color:设置阴影的颜色;
  • inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

box-shadow实现多边框:

div{  
     box-shadow: 0 0 0 10px red,
          0 0 0 16px green,
          0 2px 5px 16px rgba(0,0,0,.5);     
     background: yellowgreen;
 }

outline实现

div{
    width: 200px;
    height: 100px;
    background: #ffffff;
    border: 5px solid #53cfa2;
    outline: #736e21 dashed 1px;
    outline-offset: -20px;
}
原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70114.html
css div多边框 outline描边