码迷,mamicode.com
首页 > 其他好文 > 详细

box-reflect

时间:2020-03-20 14:20:21      阅读:65      评论:0      收藏:0      [点我收藏+]

标签:linear   span   repeat   image   rect   tag   color   line   style   

.reflect {
-webkit-box-reflect:below 0 linear-gradient(transparent, rgba(255,255,255,0.1));
}

语法

box-reflect:none | <direction> <offset> <mask-box-image>

<direction> = above | below | left | right

<offset> = <length> | <percentage>

<mask-box-image> = none | <url> | <linear-gradient> | <radial-gradient> | <repeating-linear-gradient> | <repeating-radial-gradient>

默认值:none

取值

none:
无倒影

<direction>

above:指定倒影在对象的上边
below:指定倒影在对象的下边
left:指定倒影在对象的左边
right:指定倒影在对象的右边

<offset>

<length>:用长度值来定义倒影与对象之间的间隔。可以为负值
<percentage>:用百分比来定义倒影与对象之间的间隔。可以为负值

<mask-box-image>

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

box-reflect

标签:linear   span   repeat   image   rect   tag   color   line   style   

原文地址:https://www.cnblogs.com/deajax/p/12531422.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!