box-shadow与filter的drop-shadow

[福利]优酷/爱奇艺/芒果 TV等会员年卡低至4折79元


阿里云香港,新加坡30M带宽服务器,每月仅需24元


[福利]超清2K,4K手机壁纸网站推荐


box-shadow与filter的drop-shadow的使用方法介绍,以及他们的使用实际例子…

同样的参数值,表现效果有差异

filter中的drop-shadow语法如下

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滤镜</title>
    <style>
        img{
            margin: 100px;
        }
        .img1{
            filter:drop-shadow(5px 5px 10px black)
        }
        .img2{
            box-shadow: 5px 5px 10px black;
        }
        #div1{
            margin: 100px;
            width: 100px;
            height: 100px;
            border: 1px solid antiquewhite;
            box-shadow: inset 5px 4px 10px #000000;
        }
    </style>
</head>
<body>
<div>
    <img class="img1" src="11.jpg" alt="">
    <img class="img2" src="11.jpg" alt="">

    <div id="div1">

    </div>
</div>
</body>
</html>

结果如下图

image

分析可以得到使用同样参数值的box-shadowbox-shadow的阴影距离更小,色值要更深

box-shadow支持inset内阴影,drop-shadow却没有

drop-shadow 的优势

应用1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滤镜</title>
    <style>

        #div1{
            width: 150px;
            height: 150px;
            border: 10px dashed black;
            margin: 100px;
            box-shadow: 5px 5px 10px red;
        }
        #div2{
            width: 150px;
            height: 150px;
            border: 10px dashed black;
            margin: 100px;
            filter: drop-shadow(5px 5px 10px red)
        }
    </style>
</head>
<body>
<div>
    <div id="div1">

    </div>
    <div id="div2">

    </div>
</div>
</body>
</html>

image

应用2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滤镜</title>
    <style>
        body{background: #ddd}
        #div1{
            width: 150px;
            height: 150px;
            background: white;
            margin: 100px;
            box-shadow: 5px 5px 10px red;
        }
        #div2{
            width: 150px;
            height: 150px;
            background: white;
            margin: 100px;
            filter: drop-shadow(5px 5px 10px red)
        }
        .tt{
            width:0;
            height:0;
            border-top:30px solid transparent;
            border-right:30px solid #fff;
            border-bottom:30px solid transparent;
            margin-left: -30px;
        }

    </style>
</head>
<body>
<div>
    <div id="div1">
        <p class="tt"></p>
    </div>
    <div id="div2">
        <p class="tt"></p>
    </div>
</div>
</body>
</html>

image

未经允许不得转载:Bcoder资源网 » box-shadow与filter的drop-shadow

免费支持本站,谢谢大家!

bcoder资源网

微信公众号: bcoder资源网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册