css3的box-shadow
boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
语法:box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影
h-shadow | 必需的。水平阴影的位置。允许负值 |
---|---|
v-shadow | 必需的。垂直阴影的位置。允许负值 |
blur | 可选。模糊距离 |
spread | 可选。阴影的大小 |
color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
inset | 可选。从外层的阴影(开始时)改变阴影内侧阴影 |
1、盒子阴影:水平 垂直 影子
<div class="box box1">box1</div>
css
* {
padding: 0;
margin: 0;
}
.box {
width: 300px;
height: 300px;
background-color: lightcyan;
margin: 100px auto;
transition: box-shadow 0.6s ease;
}
.box1 {
box-shadow: 10px 10px 10px gray;
}
代码演示:
2、我们也可以将影子偏移调的大一些。这样看起来更加明显;
<div class="box box2">box2</div> <div class="box box3">box3</div>
css
.box2{ box-shadow: 100px 0 10px gray; } .box3{ box-shadow: 50px 50px 10px gray; }
代码演示:
评论
匿名评论
隐私政策
你无需删除空行,直接评论以获取最佳展示效果