box-shadow

box-shadow 属性是给盒模型设置阴影的属性。今天总结一下。

box-shadow: h-shadow v-shadow blur spread color inset;

描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

html



div{
    background:red;
    width:200px;
    height:200px;
    box-shadow:200px 200px 0px green;
}


box-shadow_第1张图片

可以看到当我们移动一个div的距离后,可以清楚地看到,box-shadow的原始大小和div一样。而且与div位置重合。

添加blur可以使边缘变得模糊。


box-shadow:200px 200px 10px green;

box-shadow_第2张图片

ps:如果模糊值为负,那么阴影消失。

spread 改变阴影大小。

正加大,负减小


box-shadow:200px 200px 10px 30px green;

box-shadow_第3张图片

可以明显见到,阴影的宽高,大了30px;

你可能感兴趣的:(box-shadow)