CSS小技巧之drop-shadow的妙用

时间 2020-01-11

标签 css 技巧 drop shadow 妙用栏目 CSS 繁體版

原文原文链接

最近开始研究css的各类奇妙的用法，励志作一个能用css写出奇幻动画效果的程序媛。css

drop-shadow和box-shadow类似，都是实现投影效果，box-shadow的使用更加常见一些，那么这两种阴影的实现有什么差别呢？html

先具体说说drop-shadow的用法。css3

filter: drop-shadow(20px 10px 4px #4444dd)浏览器

语法：bash

drop-shadow(offset-x offset-y blur-radius spread-radius color)wordpress

参数：学习

offset-x offset-y （必须）：x偏移和y偏移动画

blur-radius（可选）：模糊大小，默认为0spa

spread-radius（可选）：可是大多数浏览器不支持这个参数3d

color（可选）：色值

能够看到和box-shadow的参数相似，可是不一样的是drop-shadow没有inset内阴影，不能阴影叠加。

drop-shadow是CSS3中filter的阴影滤镜。相较于box-shadow而言，他更像真实世界的投影，非透明的颜色下，有投影；透明的部分，光线穿过，无投影。

如下咱们从几个方面来比较如下二者的区别

1、兼容性

能够看到IE不支持filter中drop-shadow，2012年前发布的大多数浏览器版本也不支持drop-shadow。移动端Android4.4也才开始支持drop-shadow。

2、参数值同样，表现效果有差别

<!DOCTYPE html>
<html>
    <head>
        <title>效果展现</title>
        <style>
            .box {
                margin: 40px; padding: 50px;
                width: 300px;
                background-color: #fff;
                position: relative;
                font-size: 24px;
            }
            .cor {
                position: absolute;
                left: -40px;
                width: 0;
                height: 0;
                overflow: hidden;
                border: 20px solid transparent;
                border-right-color: #fff;
            }
            .drop-shadow {
                filter: drop-shadow(5px 5px 10px black);
            }
            .box-shadow{
                box-shadow: 5px 5px 10px black;
            }
        </style>
    </head>
    <body>
        <div class="box drop-shadow">
            <i class="cor"></i>
            filter: drop-shadow
        </div>
        <div class="box box-shadow">
            <i class="cor"></i>
            box-shadow
        </div>
    </body>
</html>
复制代码

上图可看到box-shadow的阴影距离更小，色值要更深。

3、drop-shadow不能阴影叠加

box-shadow有个很厉害的地方，就是阴影能够任意叠加，所以能够做出不少不一样效果的图片，好比：

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
            width:100px;
            height:100px;
            margin:50px auto;
            background:deeppink;
            border-radius:50%;
            box-shadow:
                120px 0px 0 -10px #795548,
                95px 20px 0 0px #607D8B,
                30px 30px 0 -10px green,
                90px -20px 0 0px #FFC107,
                40px -40px 0 0px #2196F3;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

<!DOCTYPE html>
<html>
    <head>
        <style>
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            height: 200px;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background-image: radial-gradient(#fff 38%, transparent 38%), radial-gradient(#09C 0, #09C 100%)
        }

        div:before {
            content: "";
            width: 285px;
            height: 122px;
            background: 0 0;
            border-radius: 100%;
            position: absolute;
            top: 33px;
            left: -45px;
            margin: auto;
            box-shadow: inset 0 12px 0 13px #09c, -35px -8px 0 -5px #fff;
            transform: rotate(-35deg)
        }

        div:after {
            content: "";
            width: 120px;
            height: 25px;
            background: #09c;
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            margin: auto;
            box-shadow: 50px 23px 0 -2px #fff
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
复制代码

虽然drop-shadow不能阴影叠加，可是它有一个很厉害的特性，就是它才是真正意义上的投影！而box-shadow只是盒阴影而已。

盒阴影 VS 投影

下面有个更加直观的例子

<!DOCTYPE html>
<html>
    <head>
        <style>
        div {
            border: 10px dashed #beceeb;
            width: 100px;
            height: 100px;
            margin: 50px;
        }

        .box-shadow {
            box-shadow: 5px 5px 10px black;
        }

        .drop-shadow {
            filter: drop-shadow(5px 5px 10px black);
        }
        </style>
    </head>
    <body>
        <div class="box-shadow"></div>
        <div class="drop-shadow"></div>
    </body>
</html>
复制代码

看到这就明白了吧？ drop-shadow不只能够穿透代码构建的元素的透明部分，还能够穿透png图片的透明部分哦！

此文章参考张鑫旭大神、MDN docs等资料写成。此文章仅供本人学习记录用。

张鑫旭：CSS3 filter:drop-shadow滤镜与box-shadow区别应用

MDN：drop-shadow

ChokCoco：【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

1. 巧妙的CSS
2. 天天一个小技巧：CSS clip-path 的妙用
3. CSS小技巧
4. CSS 小技巧
5. css 小技巧
6. css小技巧
7. Css 小技巧
8. 【javascript 技巧】Array.prototype.slice的妙用
9. css 使用小技巧
10. HTML + CSS 小技巧
更多相关文章...
• Markdown 高级技巧 - Markdown 教程
• 使用 CSS 显示 XML - XML 教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• C# 中 foreach 遍历的用法