css中阴影效果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揭秘》这本书中的多重边框效果。
如下效果：
代码相信大家可以看到，用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的相关应用技巧，就写到这里。希望对大家有帮助！
相关文章
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一说绘制红衣喝酒男水粉画效果的教程，各位想知道具体绘制步骤的使用者，那么下面就快来跟着小编一起看一看教程...2016-09-14
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说利用各种素材合成闪电侠效果的制作教程，各位想知道具体制作步骤的使用者们，那么下面就快来跟着小编一起看...2016-09-14
- photoshop软件是一款专业的图像设计软件了，但对电脑的要求也是越高越好的，如果配置一般打开ps会比较慢了，那么photoshop打开很慢怎么办呢，下面来看问题解决办法。 1、...2016-09-14
- JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 今天小编在这里就来给美图秀秀的这一款软件的使用者们来说下把普通照片快速转换成卡通效果的教程，各位想知道具体制作步骤的使用者们，那么下面就快阿里跟着小编一起看一...2016-09-14
- 本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，现在网上还有很多还在用这个特效的呢，代码分享给大家吧。运行效果截图如下：在线演...2015-10-30
- 今天小编在这里就来给photoshop的这一款软件的使用者们来说说调出时尚个性青色人像照片效果的调色教程，各位想知道到底该怎么调色的，那么下面就快来跟着小编一起看一看...2016-09-14
- 目前，JSON已经成为最流行的数据交换格式之一，各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》，探讨它的设计思想。今天，我想总结一下PHP语言对它的支持，这是开发互联网应用程序（特别是编写API）必须了解的知识...2015-10-30
- 刷票行为，一直以来都是个难题，无法从根本上防止。但是我们可以尽量减少刷票的伤害，比如：通过人为增加的逻辑限制。基于 PHP，下面介绍防刷票的一些技巧：1、使用CURL进行信息伪造$ch = curl_init(); curl_setopt($ch, CURLOP...2015-11-24
- ps软件是现在很多人比较喜欢的，有着非常不错的使用效果，这次文章就给大家介绍下ps怎么制作图片阴影效果，还不知道制作方法的赶紧来看看。 ps图片阴影效果怎么做方法/...2017-07-06
- 通过本篇文章给大家介绍Sublime Text3使用技巧的相关知识，对sublime text3技巧相关知识感兴趣的朋友一起学习吧...2015-12-24
- ps软件是现在很多人比较喜欢使用的，有着非常不错的功能。这次文章就给大家介绍下ps立体倒影效果制作方法，还不知道怎么制作的赶紧来看看。 最终效果  1...2017-07-06
- 本篇文章介绍了我在爬虫过程中总结的几个必备技巧，都是经过实验的，通读本篇对大家的学习或工作具有一定的价值，需要的朋友可以参考下...2021-10-22
- 这篇文章主要介绍了分享12个非常实用的JavaScript小技巧,这些小技巧可能在你的实际工作中或许能帮助你解决一些问题，需要的朋友可以参考下...2016-05-14
- ps软件是现在非常受大家喜欢的一款软件，有着非常不错的制作效果。下面文章就给大家介绍下ps制作立体文字效果教程，感兴趣的一起来看看。 ps文字立体效果怎么做最终...2017-07-06
- 本文章分享一篇关于Photoshop打造科幻片中的人物粒子化消失效果，教程重点是画笔的应用，人物身上产生的碎块，颗粒等都是用自定或下载的笔刷来完成，制作之前最好先下载一些...2016-09-14
- 这篇文章主要介绍了jQuery实现的文字hover颜色渐变效果,以完整实例形式分析了jQuery实现文字颜色渐变效果的相关技巧,涉及jQuery插件jquery-ui-1.8.16.custom.min.js的使用,需要的朋友可以参考下...2016-02-23
- 今天小编在这里给painter的这一款软件的使用者们带来的是绘制水彩油画双重效果向日葵插画的教程，各位想知道具体绘制方法的使用者，那么下面就快来跟着小编一起看一看吧...2016-09-14
- 今天小编在这里就来给Illustrator的这一款软件的使用者们来说一说像素级完美绘制的经验技巧，各位想知道具体信息的使用者们，那么下面就快来跟着小编一起看一看。 给...2016-09-14
- 今天小编在这里就来给Painter的这一款软件的使用者们来说一下绘制卡通小丑头像效果的教程，各位想知道具体制作步骤的使用者，那么下面就快来跟着小编一起看一看制作步骤...2016-09-14