您的位置：58脚本 > CSS3 box-reflect 属性

CSS3 box-reflect 属性

2023-05-09 15:32 CSS3教程

CSS3 box-reflect 属性 

<!DOCTYPE html><html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>box-reflect_CSS3参考手册</title>
<style>
html,body{margin:50px 0;}
.reflect{width:950px;margin:0 auto;-webkit-box-reflect:below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.3));
font:bold 100px/1.231 georgia,sans-serif;text-transform:uppercase;}
</style>
</head>
<body>
<div class="reflect">你看到倒影了么？</div>
</body>
</html>

运行一下

语法

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

说明

设置或检索对象倒影。
  • 对应的脚本特性为boxReflect。

浏览器支持


阅读全文
以上是58脚本为你收集整理的 CSS3 box-reflect 属性全部内容。
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
全部标签 标签详情
相关文章
热门文章
推荐文章
猜您喜欢
© 2024 58脚本 58jiaoben.com 版权所有 联系我们
桂ICP备12005667号-28 Powered by CMS