图片倒影 2019-12-08

css3新特性

元素倒影
box-reflect:
below | above | left | right 0/距离
注意兼容性处理

css3渐变绘图
rgb(100,200,120);
transparent 类似rgba(0,0,0,0)
RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)

-webkit-box-reflect:right 5px -webkit-gradient
(linear,left top,left bottom,from(transparent),to(rgba(250,250,250,1)));

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    div{
        width:400px;
        height:300px;
        background:url(http://img4.imgtn.bdimg.com/it/u=1761250919,1896060533&fm=26&gp=0.jpg) no-repeat;
        background-size: 100%,100%;
        /*倒影*/
        /*-webkit-box-reflect:right 5px;*/
        -webkit-box-reflect:below 1px -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.1)),to(rgba(250,250,250,1)));
    }

    </style>
</head>
<body>
    <div></div>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容