2000字范文,分享全网优秀范文,学习好帮手!
2000字范文 > 浅谈CSS3新特性——文字阴影text-shadow 阴影box-shadow和倒影box-reflect

浅谈CSS3新特性——文字阴影text-shadow 阴影box-shadow和倒影box-reflect

时间:2019-04-26 06:15:21

相关推荐

浅谈CSS3新特性——文字阴影text-shadow 阴影box-shadow和倒影box-reflect

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);

说明:遮罩只会把遮罩图里透明像素所对应的原图部分进行隐藏。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。