box-reflect//加个倒影效果；（一分钟搞定）

box-reflect:

举个栗子：

效果：（可以是任何内容，文字或者图片）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>box-reflect</title>
</head>
<style>
    .caption{
        margin-top:50px;
        width:100%;
        text-align: center;
        box-reflect:below -4px linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));
        -webkit-box-reflect: below -4px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,.3));

    }
</style>
<body>
    <div class="caption">
        <h1>要个倒影</h1>
    </div>
</body>
</html>

属性介绍：

 

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

 

 

 其他栗子，加载中...

 

posted @ 2019-06-17 16:05  第101次弃游  Views(205)  Comments(0)  Edit  收藏  举报