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>
複製代碼