CSS3-阴影参数基础

2018-06-24 02:25:41来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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>:使用重复的径向(放射性)渐变创建遮罩图像。

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS基础汇总

下一篇:面试整理(2)跨域:jsonp与CORS