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 的奇特用法的全部内容,假如对你有帮助,请分享出去让大家一起学习,同时,你有更好的方法技巧可以留言我们一起探讨,感谢阅读!
码云笔记 » css3中box-shadow的奇特用法
感谢分享
这就是奇淫技巧啊