盒子阴影box-shadow

  1. 属性:

box-shadow

  1. 作用:

用于设定一个盒子的阴影效果

  1. 形式:

box-shadow:水平偏移值  垂直偏移值  [模糊值]  [外延值]  [颜色]  [inset];

  1. 说明:

1,至少设置两个长度值,分别表示阴影的水平偏移量和垂直偏移量,可以为负;

2,模糊值是设定阴影的模糊效果的宽度,可以不设置,则默认为0;

3,外延值是设定阴影再“扩大”的宽度,可以不设置,则默认为0;

4,inset表示设置“内阴影”,可以不设置,则默认为外阴影。

  1. 举例:

.box1{ box-shadow: 2px 2px red; }

.box2{ box-shadow: 2px 5px 2px #00FFFF; }

.box3{ box-shadow: 2px 5px 2px 3px rgba(33, 33, 33, 0.5); }

.box4{ box-shadow: 2px 5px rgba(66,66,66,0.5) inset; }

 

猜你喜欢

转载自blog.csdn.net/qq_34608447/article/details/89333607