box-shadow

box-shadow

让我们先来看看我们想要达到的效果:一个div外面有3个边框。如何实现这一点?它只能用div实现。

可能会有人来说:给div加一个边框,然后给div加两个伪类,分别加两个边框。完美实现。

嗯,不可否认完全可以实现,但是如果需求有一点变化,我想实现四个边界怎么办?五个怎么样?100呢?

哈哈哈哈,是不是一脸的欺骗。这时候我就借助我的头条——框影说一下,等我细说。

我们通常以这种方式使用css3的盒子阴影:

#box{box-shadow:0 0 10px rbga(0,0,0,. 5)};后面跟着四个参数。

简单解释一下:前两个参数是X和Y两个轴的偏移量,第三个参数是模糊大小,最后一个参数是颜色值。很简单。

但是我今天要说的是:box-shadow:它后面可以跟五个参数。第四个参数可以用来实现边框的效果。废话少说,代码:

总结:1。正如我在上一篇文章“移动页面性能黑仔”中所说,尽量不要将box-shadow放在元素的样式中,而是放在伪类中。

2.你可以在框中写多个阴影-阴影,用逗号分隔。每个阴影都可以写一个边框,那么理论上是否可以达到n个边框的效果呢?

希望我的分享能帮助到大家。

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论