html里box-shadow的写法,css3中box-shadow的奇特用法

box-shadow属性是css3中的一个属性，几乎可以在人和元素上添加阴影效果，通过它我们可以做出很多非常酷的东西。接下来我将为大家讲解box-shadow属性的奇特使用方法。

兼容性

语法

box-shadow: h-shadow v-shadow blur spread color inset;

它有六个属性值，前两个必填，后面都是可选。第四个值是阴影尺寸，就是用这个值来制作多重边框的！

第六个属性inset和outset，是内部阴影和外部阴影，默认是外部阴影。

注释：box-shadow向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由2-4个长度值、可选的颜色值以及可选的inset关键词来规定。省略长度的值是0。

技巧一：偏移和连写

在手机端我们会看到导航按钮“三道杠”，这里我们可以用box-shadow的偏移效果来书写移动端导航按钮“三道杠”，如下图：

上图正是运用了box-shadow的偏移和连写！什么是连写？就是我们可以书写多个box-shadow，并用“，”进行分割。达到不同的效果！

三道杠的代码书写如下：

.sdg{

width:45px;

height:45px;

line-height:2.6;

border:1px solid #fff;

}

.sdg::before{

content:"";

width:20px;

height:2px;

background:#fff;

display:inline-block;

box-shadow:0 7px 0 #fff,0 -7px 0 #fff;

}

上面代码，我们用一个伪元素，书写了中间的一道杠，然后用box-shadow:07px0#fff,0-7px0#fff;书写了上面和下面的两道杠，分别偏移是7px。

技巧二：多重边框

先看一下效果图：

核心代码如下：

.box{

background:yellowgreen;

box-shadow:0 0 0 10px #665,

0 0 0 15px deeppink,

0 2px 5px 15px rgba(0,0,0,.6);

}

想写几个边框，就用逗号连写几个，用起来非常方便！

另外，我们还可以用outline(描边)方案进行多重边框的书写，以及运用box-shadow和outline进行边框内圆角的书写！在这里我就不多介绍了！需要深入了解的，建议去朋友那边搞一本《css揭秘》读读！

结束语

以上就是今天码云笔记为大家带来的关于css3中box-shadow的奇特用法的全部内容，假如对你有帮助，请分享出去让大家一起学习，同时，你有更好的方法技巧可以留言我们一起探讨，感谢阅读！