CSS揭祕（四視覺效果）
阿新 • • 發佈：2020-08-10
知識點：
text-shadow為文字新增陰影。可以為文字與text-decorations新增多個陰影，陰影值之間用逗號隔開。每個陰影值由元素在X和Y方向的偏移量、模糊半徑和顏色值組成（/* offset-x | offset-y | blur-radius | color */）。當所給的陰影大於一個時，陰影應用的順序為從前到後, 第一個指定的陰影在頂部.
box-shadow屬性用於在元素的框架上新增陰影效果。你可以在同一個元素上設定多個陰影效果，並用逗號將他們分隔開。該屬性可設定的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色（//* 插頁(陰影向內) | x偏移量| y偏移量 | 陰影模糊半徑 | 陰影擴散半徑 | 陰影顏色 */）。
一、投影
box-shadow可以在同一個元素上設定多個陰影效果，並用逗號將他們分隔開。該屬性可設定的值包括陰影的X軸偏移量、Y軸偏移量、模糊半徑、擴散半徑和顏色。 如果元素同時設定了border-radius屬性 ，那麼陰影也會有圓角效果。
box-shadow: 0 5px 4px -4px black; 單側投影
box-shadow: 3px 3px 6px -3px black; 鄰邊投影
box-shadow: 5px 0 5px -5px black,-5px 0 5px -5px black; 雙側投影
二、不規則投影
當我們想給一個矩形或其他能用 border-radius 生成的形狀（在“自適應的橢圓”一節中可以看到一些示例）加投影時，box-shadow 的表現都堪稱完美。但是，當元素添加了一些偽元素或半透明的裝飾之後，它就有些力不從心了，因為 border-radius 會無恥地忽視透明部分。
通過 CSS 美化過的元素無法完美地渲染 box-shadow；
解決辦法：濾鏡效果規範：
引入了一個叫作 filter 的新屬性，這個屬性也是從 SVG 那裡借鑑過來的。儘管 CSS 濾鏡基本上就是 SVG 濾鏡，但我們並不需要掌握任何SVG 知識。相反，只需要一些函式就可以很方便地指定濾鏡效果了，比如blur()、grayscale() 以及我們需要的 drop-shadow() ！如果你喜歡，甚至可以把多個濾鏡串連起來，只要用空格把它們分隔開就可以了， filter: blur() grayscale() drop-shadow(); drop-shadow() 濾鏡可接受的引數基本上跟 box-shadow 屬性是一樣 的，但不包括擴張半徑，不包括 inset 關鍵字，也不支援逗號分割的多層投 影語法。 如下： filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));達到效果三、染色效果
背景：HSL 色彩模型，background-size
濾鏡是可動畫的，而混合模式則不是1.使用濾鏡：
第一個濾鏡是 sepia()，它會給圖片增加一種降飽和度的橙黃色色效果，幾乎所有畫素的色相值會被收斂到 35~40 用 saturate() 濾鏡來給每個畫素提升飽和度 hue-rotate() 濾鏡，把每個畫素的色相以指定的度數進行偏移。 img { transition: .5s filter; filter: sepia(1) saturate(4) hue-rotate(295deg); } img:hover, img:focus { filter: none; }2.混合模式
“混合模式”控制了上層元素的顏色與下層顏色進行混合的方式。用它來實現染色效果時，需要用到的混合模式是 luminosity。這種 luminosity 混合模式會保留上層元素的 HSL 亮度信 息，並從它的下層吸取色相和飽和度資訊。如果在下層準備好我們想要的主色調，並把待處理的圖片放在上層並設定為這種混合模式，那本質上不就是在做染色處理嗎？ 要對一個元素設定混合模式，有兩個屬性可以派上用場：mix-blendmode 可以為整個元素設定混合模式，background-blend-mode 可以為每層背景單獨指定混合模式。這意味著，如果用這個方案來處理圖片，我們實際上有兩種選擇。不過這兩者各有所短。 第一種選擇：需要把圖片包裹在一個容器中，並把容器的背景色設定為我們想要的主色調。 <a href="#something"> <img src="tiger.jpg" alt="Rawrrr!" /> </a> a { background: hsl(335, 100%, 50%); } img { mix-blend-mode: luminosity; } 第二種選擇：不用圖片元素，而是用 <div> 元素——把這個元素的第一層背景設定為要染色的圖片，並把第二層的背景設定為我們想要的主色調。 濾鏡是可動畫的，而混合模式則不是，但： mix-blend-mode 是把整個元素向下進行混合， 而不管它的下層是什麼。因此，如果我們把這個屬性設定為 luminosity 混 合模式，那圖片就總是會跟某些東西進行混合。此外，使用 background blend-mode 屬性則可以讓每層背景跟它的下層背景進行混合，但並不關心 元素之外是什麼情況。另外，當我們只有一個背景影象以及一個透明背景色 時，會發生什麼？你猜對了：不會出現任何混合效果！ <div class="tinted-image" style="background-image:url(tiger.jpg)"> </div> .tinted-image { width: 640px; height: 440px; background-size: cover; background-color: hsl(335, 100%, 50%); background-blend-mode: luminosity; transition: .5s background-color; } .tinted-image:hover { background-color: transparent; } 四、毛玻璃效果 藉助 blur() 濾鏡，我們在 CSS 中獲得了對元素進行模糊處理的能力。 我們在 SVG 中很早就可以使用模糊濾鏡了，而這個 CSS 濾鏡本質上就是它 的硬體加速對應版本。不過，如果我們直接在這個例子中使用 blur() 濾鏡， 整個元素都會被模糊，文字反而變得更加無法閱讀了（參見圖 4-17）。有沒 有某種方法可以只對元素的背層（即被該元素遮住的那部分背景）應用這個 濾鏡呢？方案：
由於我們不能直接對元素本身進行模糊處理，就對一個偽元素進行處理，然後將其定位到元素的下層，它的背景將會無縫匹配 <body> 的背景。 body, main::before { background: url("tiger.jpg") 0 / cover fixed; } main { position: relative; background: hsla(0,0%,100%,.3); overflow: hidden; } main::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px); margin: -30px; } 為什麼不對 main::before 使用 background: inherit 呢？因為偽元素會從 main（而不是body）那裡繼承樣式，這樣它只能得到一個半透明的白色背景。五、折角效果
background: #58a; /* 回退樣式 */ background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em, linear-gradient(-135deg, transparent 1.5em, #58a 0);