box-shadow与filter的drop-shadow

最新推荐文章于 2024-04-17 03:10:50 发布

canglingyue

最新推荐文章于 2024-04-17 03:10:50 发布

阅读量470

点赞数

分类专栏： html+css 文章标签： filter css

本文链接：https://blog.csdn.net/canglingyue/article/details/51783748

版权

html+css 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

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

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>

结果如下图

分析可以得到使用同样参数值的box-shadow，box-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>

应用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>