当前位置：K88软件开发 → 文章中心 → 编程语言 → JavaScript → JS01 → 文章内容

box-shadow与filter的drop-shadow

减小字体 增大字体 作者：佚名  来源：网上搜集  发布时间：2019-1-4 8:50:41

-->

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

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

filter中的

1
drop-shadow

语法如下

1
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!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=http://www.bcoder.cn/"11.jpg" alt="">
    <img class="img2" src=http://www.bcoder.cn/"11.jpg" alt="">

    <div id="div1">

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

结果如下图

分析可以得到使用同样参数值的

1
box-shadow

，

1
box-shadow

的阴影距离更小，色值要更深

1
box-shadow

支持inset内阴影，

1
drop-shadow

却没有

1
drop-shadow

的优势

应用1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!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>


box-shadow与filter的drop-shadow



[] [返回上一页] [打 印]

文章评论评论内容只代表网友观点，与本站立场无关！