CSS Box Shadow 除了做阴影效果还能做啥
CSS Box Shadow 除了做阴影效果还能做啥
前端GoGoGo
发布于 2018-08-27 10:09:30
发布于 2018-08-27 10:09:30
Box Shadow 可以用来 先介绍一下CSS Box Shadow 的语法
box-shadow:
[horizontal offset] [vertical offset] [blur radius]
[spread radius] [color] [inset];说明：
- h-shadow 必需。水平阴影的位置。允许负值。
- v-shadow 必需。垂直阴影的位置。允许负值。
- blur 可选。模糊距离。默认值为0。
- spread 可选。阴影的尺寸。默认值为0。若为正值，则比自身大，负值则比自身小。
- color 可选。阴影的颜色。
- inset 可选。将外部阴影 (outset) 改为内部阴影。值为inset。
例如，我们写如下的代码
.shadow {
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}其效果如下
Box Shadow.png
有意思的是，Box Shadow支持多个值,值之间用,分隔。也就是说，一个元素上可以有任意多个阴影。如果我们只设置阴影的水平和垂直偏移量，不设置模糊距离（默认为0，即不模糊），则可以达到用Box Shadow拷贝自身的目的~如果我们这样写N多个值，就可以拷贝N个自身。然后还可以通过spread来调节拷贝的大小，color来调节拷贝的背景色。
如下图中邮票的边缘，即为一个圆形不断拷贝，而形成的
demo.png
主要代码为
.target {
background-color: #fff;
position: relative;
width: 195px;
height: 195px;
margin: 50px auto;
overflow: hidden;
}
.target::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgb(114, 188, 191);
box-shadow: 15px 0 0 rgb(114, 188, 191),
30px 0 0 rgb(114, 188, 191),
45px 0 0 rgb(114, 188, 191),
60px 0 0 rgb(114, 188, 191), 还有很多;
}Have Fun！
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015.08.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读