1、text-shadow
向文本添加一个或多个阴影。
语法 text-shadow: x-shadow y-shadow distance color;
eg:
text-shadow: 5px 5px 5px red;
2、box-shadow
向框添加一个或多个阴影。
语法box-shadow: x-shadow y-shadow distance size color inset/outset;
eg:
box-shadow: 10px 10px 10px red;
3、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>:使用重复的径向(放射性)渐变创建遮罩图像。
eg:
width:100px;height:100px;background:-webkit-linear-gradient(top,red,yellow,green);-webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,pink 50%,blue);
说明:遮罩只会把遮罩图里透明像素所对应的原图部分进行隐藏。