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

知識點

box-shadow:      [inset]?

注意：

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

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

box-shadow第四個參數是擴張半徑，指定整數是擴大，負數為縮小。

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

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

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

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，使用一些函數，如blur()、grayscale()、drop-shadow()等等，就可以達到想要的效果。drop-shadow()的參數除了沒有擴張半徑和關鍵字inset，其他和box-shadow一樣，但它不支持逗號分隔的多層投影語法。

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%;
}

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

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

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

原圖

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

saturate() 提升飽和度

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

還可以加過度動畫，最終的代碼是

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

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

為了避免上面那種濾鏡方式的褪色和不自然的效果，還可以使用“混合模式”，這種方式控制了上層元素的顏色和下層顏色進行混合的方式。實現染色效果的混合模式是luminosity，它會保留上層元素的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;
}

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

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

    

        
 Lorem ipsum dolor sit amet...
    

失敗案例一：

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

字體不清晰，調高透明度的值：

不太美觀。。。

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

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

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

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

.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時，會創建層疊上下文*/
    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;/*負的z-index會下降到其所在的層級上下文的背景之上，在這里也就是.main元素的背景之上，文本以下。*/
    margin:-30px; /*由于邊緣的模糊效果會按模糊半徑的長度削減，所以要將模糊元素擴展出去，同時父元素要對延伸出去的部分hidden*/
}

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

看了文章發現，很多屬性都可以創建層疊上下文，如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是通過三角形計算得到，√2em取整為1.5。

每個角度都需要復雜的計算，這里以30°為例。非45°折角和45°折角不同的是，反折過來的角是不一樣的。所以實現思路就不同了。使用偽元素模擬折角，計算得到的長寬和背景切角相反；以右下角為中心逆時針旋轉30°；再向上移動一段距離（要調動初中幾何的功底了），就可以了；最后加點裝飾更真實。

.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); /*注意：先平移再旋轉和先旋轉再平移效果是不一樣的！*/
    /*裝飾*/
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

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