image.png

box-reflect语法

box-reflect：none | <direction> <offset>? <mask-box-image>?

由于此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
 box-reflect：none | <direction> <offset>? <mask-box-image>?

Firefox下并不支持这个属性,在Firefox下可以通过-moz-element()来模拟

具体用法参考链接教程：https://www.w3cplus.com/css3/css3-box-reflect.html

我制作一个 简单的小例子：

<div class="box">我是一个倒影的元素，哇咔咔</div>

.box{
            width: 300px;
            height: 200px;
            background-color: yellowgreen;
            border: soild 2px red;

            background: url(tu.jpg) left top /cover no-repeat;

            -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,.6));

        }

效果图

image.png