整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
動條的邊角。
最近我朋友問我，他說他使用CSS自定義的滾動條，當x軸和y軸都出現滾動條的時候，它的右下角有個缺口是白色的缺口，挺難看的。他說他想把這玩意染成綠色的，問我有沒有辦法。
·我就先去看了一下系統自帶的滾動條，把它放開看一下，你會發現系統自帶的滾動條右下角的缺口是和盒子的背景的主色是一個色系，都是這種灰色。因為是外層盒子的滾動條，所以它跟隨外層盒子的背景色是同樣的顏色。
·然后我就去看了一下文檔，發現這一個缺口的地方是可以設置的，這個缺口學名叫做邊角，也就是滾動條的邊角。
·然后我們看第三個案例，你會發現第三個盒子的右下角有一塊綠色的部分，這個綠色的部分就是滾動條的邊角部分。
·然后看一下是怎么設置的，是通過web kit scuba corner對這個偽元素進行設置背景色，就可以去修改這個邊角的顏色。
者 | chokcoco
來源 | https://juejin.im/post/5be1023951882516fd36a38e
最近一個新的項目，CSS-Inspiration，挖掘了其他很多有關 CSS 陰影的點子，是之前的文章沒有覆蓋到的新內容，而且有一些很有意思，遂打算再起一篇。不過之前小編也發布了幾篇關于CSS相關文章不妨一起來回顧回顧：
《手把手整理CSS3知識匯總【思維導圖】》
于 CSS 陰影，之前已經有寫過一篇，box-shadow 與 filter:drop-shadow 詳解及奇技淫巧，介紹了一些關于 box-shadow 的用法。
最近一個新的項目，CSS-Inspiration，挖掘了其他很多有關 CSS 陰影的點子，是之前的文章沒有覆蓋到的新內容，而且有一些很有意思，遂打算再起一篇。
本文的題目是 CSS 陰影技巧與細節。CSS 陰影，卻不一定是 box-shadow 與 filter:drop-shadow，為啥？因為使用其他屬性也可以模擬陰影，而且是各種各樣的陰影。下面且聽我娓娓道來~
單側投影
先說單側投影，關于 box-shadow，大部分時候，我們使用它都是用來生成一個兩側的投影，或者一個四側的投影。如下：
OK，那如果要生成一個單側的投影呢？
我們來看看 box-shadow 的用法定義：
{ box-shadow: none | [inset? && [ <offset-x> <offset-y> <blur-radius>? <spread-radius>? <color>? ] ]#}
以 box-shadow: 1px 2px 3px 4px #333 為例，4 個數值的含義分別是，x 方向偏移值、y 方向偏移值 、模糊半徑、擴張半徑。
這里有一個小技巧，擴張半徑可以為負值。
繼續，如果陰影的模糊半徑，與負的擴張半徑一致，那么我們將看不到任何陰影，因為生成的陰影將被包含在原來的元素之下，除非給它設定一個方向的偏移量。所以這個時候，我們給定一個方向的偏移值，即可實現單側投影：
CodePen Demo — css單側投影（https://codepen.io/Chokcoco/pen/pergRb）
投影背景 / 背景動畫
接著上面的說。
很明顯，0 = -0，所以當 box-shadow 的模糊半徑和擴張半徑都為 0 的時候，我們也可以得到一個和元素大小一樣的陰影，只不過被元素本身遮擋住了，我們嘗試將其偏移出來。
CSS代碼如下：
div { width: 80px; height: 80px; border: 1px solid #333; box-sizing: border-box; box-shadow: 80px 80px 0 0 #000;}
得到如下結果：
有什么用呢？好像沒什么意義啊。
額，確實好像沒什么用。不過我們注意到，box-shadow 是可以設置多層的，也就是多層陰影，而且可以進行過渡變換動畫（補間動畫）。但是 background-image: linear-gradient()，也就是漸變背景是不能進行補間動畫的。
這又扯到哪里去了。好我們回來，利用上面的特性，我們可以利用 box-shadow 實現原本只能利用漸變才能實現的背景圖：
用 box-shadow，實現它的 CSS 代碼如下（可以更簡化）：
.shadow { position: relative; width: 250px; height: 250px;}.shadow::before { content: ""; position: absolute; width: 50px; height: 50px; top: -50px; left: -50px; box-shadow: 50px 50px #000, 150px 50px #000, 250px 50px #000, 50px 100px #000, 150px 100px #000, 250px 100px #000, 50px 150px #000, 150px 150px #000, 250px 150px #000, 50px 200px #000, 150px 200px #000, 250px 200px #000, 50px 250px #000, 150px 250px #000, 250px 250px #000;}
用漸變來實現的話，只需要這樣：
.gradient { width: 250px; height: 250px; background-image: linear-gradient(90deg, #000 0%, #000 50%, #fff 50%, #fff 100%); background-size: 100px 100px;}
為什么選擇更為復雜的 box-shadow 呢？因為它可以進行補間動畫，像這樣，這是使用漸變做不到的：
CodePen Demo — box-shadow實現背景動畫（https://codepen.io/Chokcoco/pen/WaBYZL）
當然，這只是個示例 Demo，運用點想象力還有很多有意思的效果，再貼一個：
CodePen Demo — CSS Checker Illusion( By David Khourshid )（https://codepen.io/davidkpiano/pen/LVzxPV）
嗯，很有意思，就是實際用途可能不大。
立體投影
好，我們繼續。下一個主題是立體投影。
這個說法很奇怪，陰影的出現，本就是為了讓原本的元素看起來更加的立體，那這里所謂的立體投影，是個怎么立體法？
這里所謂的立體投影，并不一定是使用了 box-shadow、text-shadow 或者 drop-shadow，而是我們使用其他元素或者屬性模擬元素的陰影。而這樣做的目的，是為了能夠突破 box-shadow 這類元素的一些定位局限。讓陰影的位置、大小、模糊度可以更加的靈活。
OK，讓我們來看看，這樣一個元素，我們希望通過自定義陰影的位置，讓它更加立體：
上圖 div 只是帶了一個非常淺的 bos-shadow ，看上去和立體沒什么關系，接下來，我們通過 div 的偽元素，給它生成一個和原圖邊角形狀類似的圖形，再通過 transform 位移一下，可能是這樣
OK，最后對這個用偽元素生成的元素進行一些虛化效果（filter或者box-shadow都可以），就可以實現一個邊角看起來像被撕開的立體效果：
代碼非常簡單，偽 CSS 代碼示意如下：
div { position: relative; width: 600px; height: 100px; background: hsl(48, 100%, 50%); border-radius: 20px;}div::before { content: ""; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; border-radius: 10px; background: hsl(48, 100%, 20%); transform: translate(0, -15%) rotate(-4deg); transform-origin: center center; box-shadow: 0 0 20px 15px hsl(48, 100%, 20%);}
所以總結一下：
還有其他很多場景：
CodePen Demo — 立體投影（https://codepen.io/Chokcoco/pen/LgdRKE?editors=1100）
文字立體投影 / 文字長陰影
上面的立體效果在文字上就完全不適用了，所以對待文字的立體陰影效果，還需要另辟蹊徑。
正常而言，我們使用 text-shadow 來生成文字陰影，像這樣：
<div> Txt Shadow</div>-----div { text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);}
嗯，挺好的，就是不夠立體。那么要做到立體文字陰影，最常見的方法就是使用多層文字陰影疊加。
Tips：和 box-shadow 一樣，text-shadow 是可以疊加多層的！但是對于單個元素而言， drop-shadow的話就只能是一層。
好，上面的文字，我們試著疊加個 50 層文字陰影試一下。額，50 層手寫，其實很快的~
好吧，手寫真的太慢了，還容易出錯，所以這里我們需要借助一下 SASS/LESS 幫忙，寫一個生成 50 層陰影的 function 就好，我們每向右和向下偏移 1px，生成一層 text-shadow：
@function makeLongShadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;} div { text-shadow: makeLongShadow(hsl(14, 100%, 30%));}
上面的 SCSS 代碼。經過編譯后，就會生成如下 CSS：
div { text-shadow: 0px 0px #992400, 1px 1px #992400, 2px 2px #992400, 3px 3px #992400, 4px 4px#992400, 5px 5px #992400, 6px 6px #992400, 7px 7px #992400, 8px 8px #992400, 9px 9px #992400, 10px10px #992400, 11px 11px #992400, 12px 12px #992400, 13px 13px #992400, 14px 14px #992400, 15px15px #992400, 16px 16px #992400, 17px 17px #992400, 18px 18px #992400, 19px 19px #992400, 20px20px #992400, 21px 21px #992400, 22px 22px #992400, 23px 23px #992400, 24px 24px #992400, 25px25px #992400, 26px 26px #992400, 27px 27px #992400, 28px 28px #992400, 29px 29px #992400, 30px30px #992400, 31px 31px #992400, 32px 32px #992400, 33px 33px #992400, 34px 34px #992400, 35px35px #992400, 36px 36px #992400, 37px 37px #992400, 38px 38px #992400, 39px 39px #992400, 40px40px #992400, 41px 41px #992400, 42px 42px #992400, 43px 43px #992400, 44px 44px #992400, 45px45px #992400, 46px 46px #992400, 47px 47px #992400, 48px 48px #992400, 49px 49px #992400, 50px50px #992400;}
看看效果：
額，很不錯，很立體。但是，就是丑，而且說不上來的奇怪。
問題出在哪里呢，陰影其實是存在明暗度和透明度的變化的，所以，對于漸進的每一層文字陰影，明暗度和透明度應該都是不斷變化的。這個需求，SASS 可以很好的實現，下面是兩個 SASS 顏色函數：
關于 SASS 顏色函數，可以看看這里：Sass基礎—顏色函數
我們使用上面兩個 SASS 顏色函數修改一下我們的 CSS 代碼，主要是修改上面的 makeLongShadow function 函數：
@function makelongrightshadow($color) { $val: 0px 0px $color; @for $i from 1 through 50 { $color: fade-out(desaturate($color, 1%), .02); $val: #{$val}, #{$i}px #{$i}px #{$color}; } @return $val;}
好，看看最終效果：
嗯，大功告成，這次順眼了很多~
CodePen Demo — 立體文字陰影（https://codepen.io/Chokcoco/pen/JmgNNa）
當然，使用 CSS 生成立體文字陰影的方法還有很多，下面再貼出一例，使用了透明色疊加底色的多重線性漸變實現的文字立體陰影，感興趣的同學可以去看看具體實現：
線性漸變配合陰影實現條紋立體陰影條紋字（https://codepen.io/Chokcoco/pen/XxQJEB?editors=1100）
長投影
上面提到了通過多層陰影疊加實現文字的立體陰影。運用在 div 這些容器上也是可以的。當然這里還有一種挺有意思的方法。假設我們，有一個矩形元素，希望給他添加一個長投影，像下面這樣：
要生成這種長投影，剛剛說的疊加多層陰影可以，再就是借助元素的兩個偽元素，其實上面的圖是這樣的：
關鍵點在于，我們通過對兩個偽元素的 transform: skew() 變換以及從實色到透明色的背景色變化，實現了長投影的效果：
CodePen Demo — 線性漸變模擬長陰影（https://codepen.io/Chokcoco/pen/qJvVGy）
彩色投影
通常而言，我們生成陰影的方式大多是 box-shadow 、filter: drop-shadow() 、text-shadow 。但是，使用它們生成的陰影通常只能是單色或者同色系的。
你這么說，難道還可以生成漸變色的陰影不成？
額，當然不行。
這個真不行，但是通過巧妙的利用 filter: blur 模糊濾鏡，我們可以假裝生成漸變色或者說是顏色豐富的陰影效果。
當然，關于 CSS 陰影還有很多有意思的技巧和細節，本文限于篇幅不再一一羅列。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
