shadow 给边框添加阴影效果

时间:2022-02-01 06:26:52

标签:

box-shadow介绍

css3可以使用 box-shadow 属性轻松地为元素添加阴影效果,box-shadow可以设定多组效果,每组参数值以逗号分隔.

语法:

box-shadow:x-shadow y-shadow blur spread color inset;

参数说明:

x-shadow:设置对象的阴影水平偏移值,单位可以是px、em或百分比等,允许负值。

y-shadow:设置对象的阴影垂直偏移值,单位可以是px、em或百分比等,允许负值。

blur:用于设置边框阴影半径大小。

spread:扩展半径,设置阴影的尺寸;这个参数可选,缺省时值为0。

color:设置阴影的颜色;

inset:这个参数默认不设置。默认情况下为外阴影,inset表示内阴影。

彩色阴影:

box-shadow:0px 0px 10px red,2px 2px 10px 10px yellow,4px 4px 12px 12px green;