摘要：實(shí)現(xiàn)染色效果的混合模式是，它會(huì)保留上層元素的高亮信息，并從它的下層吸取色相和飽和度信息。當(dāng)我們只有一個(gè)背景圖像及一個(gè)透明背景色時(shí)，就不會(huì)有任何混合效果。

知識(shí)點(diǎn)

box-shadow:      [inset]?

注意：

在元素正下方的投影被裁切掉了，是沒有的；而text-shadow不同，文字下方的投影不會(huì)被裁切。

box-shadow的第三個(gè)參數(shù)是模糊半徑，假如設(shè)置4px，則投影尺寸比元素本身大8px.

box-shadow第四個(gè)參數(shù)是擴(kuò)張半徑，指定整數(shù)是擴(kuò)大，負(fù)數(shù)為縮小。

box-shadow: 0 10px 8px -8px black;

box-shadow: 6px 6px 12px -6px black;

box-shadow無(wú)法多帶帶指定水平或垂直方向上的放大或縮小，所以只能用兩層投影達(dá)到目的。

box-shadow: 6px 0 12px -6px black, -6px 0 12px -6px black;

box-shadow給矩形或用border-radius生成的形狀加投影很完美，但給除此之外的形狀加投影，就不太行了。比如：

border:10px dashed orange; 
box-shadow: 2px 2px 3px rgba(0,0,0,.5);

可以使用css新屬性濾鏡filter，使用一些函數(shù)，如blur()、grayscale()、drop-shadow()等等，就可以達(dá)到想要的效果。drop-shadow()的參數(shù)除了沒有擴(kuò)張半徑和關(guān)鍵字inset，其他和box-shadow一樣，但它不支持逗號(hào)分隔的多層投影語(yǔ)法。

border:10px dashed orange; 
filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));

background: linear-gradient(45deg, transparent 20px, orange 0) left bottom /50%,
    linear-gradient(-45deg, transparent 20px, orange 0) right bottom /50%,
    linear-gradient(135deg, transparent 20px, orange 0) left top /50%,
    linear-gradient(-135deg, transparent 20px, orange 0) right top /50%;
background-repeat: no-repeat;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));

.talkbox{
    background-color: orange;
    border-radius: 20px;
    position: relative;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));
}
.talkbox::after{
    content: "";
    display: block;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border-left: 25px solid orange;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    top: 25%;
    left: 100%;
}

需要注意的是，任何非透明的部分都會(huì)被drop-shadow()打上投影。（這并不是一種很好的體驗(yàn)）

color: orange; border: 10px solid; 
text-shadow: 2px 2px yellowgreen; 
filter: drop-shadow(2px 2px 2px black);

使用filter給圖片添加濾鏡效果。主要用到了sepia()、saturate()、hue-rotate()這些函數(shù)。

原圖

sepia() 降飽和度的橙黃色染色效果

saturate() 提升飽和度

hue-rotate() 把每個(gè)像素的色相進(jìn)行偏移，偏到粉色

還可以加過度動(dòng)畫，最終的代碼是

.filter-img{
    transition: .5s filter;
    filter: sepia(.5) saturate(4) hue-rotate(295deg);
 }

 .filter-img:hover,
 .filter-img:focus{
    filter: none;
 }

為了避免上面那種濾鏡方式的褪色和不自然的效果，還可以使用“混合模式”，這種方式控制了上層元素的顏色和下層顏色進(jìn)行混合的方式。實(shí)現(xiàn)染色效果的混合模式是luminosity，它會(huì)保留上層元素的hsl高亮信息，并從它的下層吸取色相和飽和度信息。

具體還可以分為兩種方式。
方式一：

方式二：

.tinted-img{
    background: url(./image/flower.jpg);
    width: 300px; height: 300px; 
    background-size: cover; 
    background-color: hsl(335, 100%, 50%); 
    background-blend-mode: luminosity; 
    transition: .5s background-color;
}

.tinted-img:hover{
    background-color: transparent;
}

這里需要說明一下，混合模式不像濾鏡一樣可動(dòng)畫。使用background-blend-mode屬性可以讓每層背景跟它的下層背景進(jìn)行混合。當(dāng)我們只有一個(gè)背景圖像及一個(gè)透明背景色時(shí)，就不會(huì)有任何混合效果。所以動(dòng)畫可以在這個(gè)原理上進(jìn)行設(shè)置。

場(chǎng)景：背景是花哨的圖片，在文字下面使用半透明顏色保證文本的可讀性。

    

        
 Lorem ipsum dolor sit amet...
    

失敗案例一：

.wrapper{
    background: url(./image/flower.jpg) 0 / cover;
}
.main{
    background: hsla(0, 0%, 100%, .3);
}

字體不清晰，調(diào)高透明度的值：

不太美觀。。。

失敗案例二：
使用blur()濾鏡。

.main{
    filter: blur(2px);
}

(⊙o⊙)… 連字體都模糊了。

解決方案：
按照之前提到過的“平行四邊形”的方案，為偽元素設(shè)置模糊濾鏡，而不會(huì)影響文本。

.wrapper{
    width: 600px; height:300px; 
    background: url(./image/flower.jpg) 0 / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main{
    width: 70%;
    height: 65%;
    padding: 1em;
    font-size: 1.2em;
    background: hsla(0, 0%, 100%, .3);
    position: relative;
    z-index: 1; /*定位元素z-index不為auto時(shí)，會(huì)創(chuàng)建層疊上下文*/
    overflow: hidden;
}
.main::before{
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url(./image/flower.jpg) 0 / cover;
    filter: blur(20px);
    z-index: -1;/*負(fù)的z-index會(huì)下降到其所在的層級(jí)上下文的背景之上，在這里也就是.main元素的背景之上，文本以下。*/
    margin:-30px; /*由于邊緣的模糊效果會(huì)按模糊半徑的長(zhǎng)度削減，所以要將模糊元素?cái)U(kuò)展出去，同時(shí)父元素要對(duì)延伸出去的部分hidden*/
}

效果出來(lái)了，但是需要說明一點(diǎn)，就是層疊順序的問題，如果直接在偽元素設(shè)置z-index為0的話，它會(huì)直接跑到最外層背景顏色下方，所以這個(gè)層疊順序很復(fù)雜，可以參考下文：
深入理解CSS中的層疊上下文和層疊順序

看了文章發(fā)現(xiàn)，很多屬性都可以創(chuàng)建層疊上下文，如display:flex、filter、mix-blend-mode等等。

background: #58a; /*回退樣式*/
background: 
linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg, transparent 1.5em, #58a 0);

注意,1.5em是通過三角形計(jì)算得到，√2em取整為1.5。

每個(gè)角度都需要復(fù)雜的計(jì)算，這里以30°為例。非45°折角和45°折角不同的是，反折過來(lái)的角是不一樣的。所以實(shí)現(xiàn)思路就不同了。使用偽元素模擬折角，計(jì)算得到的長(zhǎng)寬和背景切角相反；以右下角為中心逆時(shí)針旋轉(zhuǎn)30°；再向上移動(dòng)一段距離（要調(diào)動(dòng)初中幾何的功底了），就可以了；最后加點(diǎn)裝飾更真實(shí)。

.note{
    background: #58a; 
       background:linear-gradient(-150deg, transparent 1.5em, #58a 0);
    position: relative;
    /*裝飾*/
    border-radius: .5em;
}
.note::before{
    content: "";
    width: 1.73em;
    height: 3em;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4));
    transform-origin: bottom right;
    transform: translateY(-1.3em) rotate(-30deg); /*注意：先平移再旋轉(zhuǎn)和先旋轉(zhuǎn)再平移效果是不一樣的！*/
    /*裝飾*/
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

代碼不夠DRY，只能使用預(yù)處理器的mixin了。