CSS3-阴影参数基础

box-shadow

语法：text-shadow: x-shadow y-shadow distance color;

 

值	描述
x-shadow	必需。水平阴影的位置。允许负值。
y-shadow	必需。垂直阴影的位置。允许负值。
distance	可选。模糊的距离。 测试
color	可选。阴影的颜色

text-shadow

语法：box-shadow: x-shadow y-shadow distance size color inset/outset;

 

值	描述
x-shadow	必需。阴影水平偏移量，可正可负，正值表示阴影在右边，负值表示阴影在左边。
y-shadow	必需。阴影垂直偏移量，可正可负，正值表示阴影在上边，负值表示阴影在下边。
distance	可选。阴影模糊距离。只能为正值，值为0时，表示阴影不具有模糊效果，值越大阴影的边缘就越模糊。
size	可选。阴影扩展半径。可正可负，正值表示整个阴影都延展扩大，负值表示缩小。
color	可选。阴影的颜色。
inset	可选。将外部阴影 (outset) 改为内部阴影。

box-reflect

向框添加一个或多个倒影。

（1）direction：定义倒影的方向，取值包括：

above：倒影在对象的上边。
below：倒影在对象的下边。
left：倒影在对象的左边。
right：倒影在对象的右边。
（2）offset：定义倒影与对象之间的间隔，可正可负，默认为0。取值包括：

长度值
百分比（根据对象的尺寸进行确定）
（3）mask-box-image：定义遮罩图像，该图像将覆盖投影区域，默认为无遮罩。

<url>：使用绝对或相对地址指定遮罩图像。
<linear-gradient>：使用线性渐变创建遮罩图像。
<radial-gradient>：使用径向(放射性)渐变创建遮罩图像。
<repeating-linear-gradient>：使用重复的线性渐变创建背遮罩像。
<repeating-radial-gradient>：使用重复的径向(放射性)渐变创建遮罩图像。

 

转载于:https://www.cnblogs.com/limengjie0104/p/9109248.html