css中box-shadow的应用技巧

[confidence68]

前言

去年我在慕课网上录制的js/jquery各种宽高的理解和应用，迟迟没有上线，近期得到慕课网的消息说是该套课程已经纳入慕课网教学体系，可能和整套体系一起上线。哎，还是期待一下吧！另外，我博客迟迟没有内容的“前端资料库”，近期已经准备了20%，总有一天会和大家见面！最后一个消息是，我在慕课网录制的新的课程《html5左侧导航菜单》已经录制完毕，目前正在安排上线中~~

新课程中提及手机端导航按钮“三道杠”的书写，我运用的是css的box-shadow属性，今天就和大家一起说说box-shadow属性的一些应用技巧！

应用技巧一：偏移和连写

我们可以用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:0 7px 0 #fff,0 -7px 0 #fff; 书写了上面和下面的两道杠，分别偏移是7px。

应用技巧二：多重边框

这个多重边框，我是参考《css揭秘》这本书中的多重边框效果。

如下效果：

<iframe style="width: 100%; height: 200px" src="http://sandbox.runjs.cn/show/u8nknanm" allowfullscreen="allowfullscreen" frameborder="0"></iframe>

代码相信大家可以看到，用box-shadow实现多重边框是很简单的！

核心代码如下：

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揭秘》读读！

有同学会问了，box-shadow我常用的就四个属性值啊（水平投影、垂直投影、模糊值，还有颜色）怎么上面出来了五个属性！

没错，box-shadow的语法如下：

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

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

第六个属性inset和outset，是内部阴影和外部阴影，默认是外部阴影。关于box-shadow的相关应用技巧，就写到这里。希望对大家有帮助！

假如您觉得有帮助，右侧（热门文章 或者 最新文章）下面，云标签上面，有百度广告，可以帮忙点击一下！为了广大朋友的体验，本博客尽量少投放广告，但是博客主要是靠广告收入维持日常运营！谢谢！