4.11 (案例) 倒影

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 00:24 被阅读0次

4.11 (案例) 倒影
基础-16、lvm
2018-09-28
磁盘管理（三）
lvm原理和操作
2017-04-11
2017-04-11
张筱雨作业
4.11rtc案例19:00
2018-04-11

倒影.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
        倒影<br />
        box-reflect: below|above|left|right
        above：
        指定倒影在对象的上边
        below：
        指定倒影在对象的下边
        left：
        指定倒影在对象的左边
        right：
        指定倒影在对象的右边

        <style>
            /*倒影*/
        .box3 img{
            width:200px;
            height: 200px;
            /*-webkit-box-reflect:below 15px ;*/
            /*-webkit-box-reflect:right 20px;*/
            /*-webkit-box-reflect:below 15px -webkit-radial-gradient(50% 50%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 60%);*/
            /*-webkit-box-reflect:below 15px -webkit-radial-gradient(50% 50%,rgba(0,0,0,0.5) 20%,rgba(0,0,0,0) 60%);*/
/*          -webkit-box-reflect:below 15px -webkit-linear-gradient( rgba(0,0,0,0) 30%,rgba(0,0,0,0.3) 70%);*/
            -webkit-box-reflect:below 15px -webkit-linear-gradient(rgba(0,0,0,0.3) 30%,  rgba(0,0,0,0.6) 80%);
            }
            .box4{
                margin-top:300px;
                height:20px;
                line-height: 20px;
                
                font-size: 20px;
                
                width:100px;
                /*border:1px red solid;*/
                -webkit-box-reflect:right 6px -webkit-linear-gradient(top,rgba(0,0,0,0.5) 50%,rgba(0,0,0,0) 90%);}
        </style>
        <div class="box3">
            ![](images/4.jpg)
        </div>  
        <div class="box4">倒影倒影倒影</div>
    </body>
</html>