CSS倒影
程序员文章站
2022-04-30 23:29:32
...
前面的话
CSS倒影目前只有chrome和safari浏览器支持,且需要添加-webkit-前缀。本文将详细介绍CSS倒影box-reflect
语法
-webkit-box-reflect
初始值: none
应用于: 块级元素(包括inline-block)
继承性: 无
值: none | <direction>
<offset>
? <mask-box-image>
?
<direction>
(必须)表示box-reflect生成倒影的方向,主要包括以下几个值:
above:表示生成的倒影在对象(原图)的上方; below:表示生成的倒影在对象(原图)的下方; left:表示生成的倒影在对象(原图)的左侧; right:表示生成的倒影在对象(原图)的右侧;
<offset>
(可选)用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值
<mask-box-image>
(可选)用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像
更多CSS倒影 相关文章请关注PHP中文网!