css3 box-reflect属性

香菊网 发表于: 2019-06-03 分类: H5部分  前端front  css  

取值:

none:无倒影

above:指定倒影在对象的上边

below:指定倒影在对象的下边

left:指定倒影在对象的左边

right:指定倒影在对象的右边

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

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

none:无遮罩图像

<url>:使用绝对或相对地址指定遮罩图像。

<linear-gradient>:使用线性渐变创建遮罩图像。

<radial-gradient>:使用径向(放射性)渐变创建遮罩图像。

<repeating-linear-gradient>:使用重复的线性渐变创建背遮罩像。

<repeating-radial-gradient>:使用重复的径向(放射性)渐变创建遮罩图像。

说明:

设置或检索对象倒影。

假设定义了 <mask-box-image>,<offset>必须指定,否则可以省略

对应的脚本特性为boxReflect
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<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>

倒影

标签: H5部分前端frontcss
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮