以我的拙見(jiàn)，好的網(wǎng)站和 Web 應(yīng)用程序應(yīng)具有“真實(shí)”品質(zhì)以政，實(shí)現(xiàn)這種效果涉及很多因素霸褒，但陰影是一個(gè)重要因素。
但是盈蛮，當(dāng)我瀏覽互聯(lián)網(wǎng)時(shí)废菱，各大網(wǎng)站大多數(shù)陰影都很虛假，布局盒子被模糊的灰色框覆蓋抖誉，看起來(lái)并不像陰影殊轴。
本文討論的就是如何將常見(jiàn)的陰影轉(zhuǎn)換為美麗的、栩栩如生的陰影：
閱讀受眾
- 本文適用于有一些 CSS 基礎(chǔ)知識(shí)的開(kāi)發(fā)人員袒炉。
1.為什么要使用陰影梳凛？
陰影意味著海拔，更大的陰影意味著更高的海拔梳杏。
如果我們有策略地使用陰影韧拒，我們可以創(chuàng)造深度視覺(jué)，就好像頁(yè)面上的元素在不同層次上十性，并且漂浮在背景之上叛溢。
例子：
好處
構(gòu)建的應(yīng)用程序具有觸感和真實(shí)感，就好像瀏覽器是進(jìn)入另一個(gè)世界的還有一個(gè)好處劲适，通過(guò)使用不同的陰影楷掉，給人一種對(duì)話框比標(biāo)題離我們更近的印象。我們的注意力往往會(huì)被吸引到離我們最近的元素上霞势，因此通過(guò)提升對(duì)話框烹植，我們更有可能讓用戶首先關(guān)注它。我們可以使用海拔作為引導(dǎo)注意力的工具愕贡。
使用陰影的目的：要么增加特定元素的顯著性草雕，要么讓應(yīng)用程序感覺(jué)更觸手可及、栩栩如生固以。
2.動(dòng)畫講述原理
2.1創(chuàng)建一致的陰影
當(dāng)我想為一個(gè)元素添加陰影時(shí)墩虹，我會(huì)添加`box-shadow并修改值，直到得到我喜歡結(jié)果憨琳。
問(wèn)題是：如果孤立地創(chuàng)建每個(gè)陰影诫钓，你會(huì)得到一堆不協(xié)調(diào)的陰影。如果我們的目標(biāo)是創(chuàng)造深度視覺(jué)篙螟，我們需要每個(gè)陰影都相互配合菌湃。否則，他們看起來(lái)就是一堆垃圾：
2.2投影角度
在自然界中遍略，陰影是光投射出來(lái)的惧所。陰影的方向取決于燈光的位置：
一般來(lái)說(shuō)，我們應(yīng)該為頁(yè)面上的所有元素確定一個(gè)單一的光源纯路，通常位于左上方：
如果 CSS 有一個(gè)照明系統(tǒng)或油，我們可以為所有元素指定同一個(gè)光源，可惜CSS 沒(méi)有這樣的東西驰唬。
我們通過(guò)指定水平偏移和垂直偏移來(lái)移動(dòng)陰影顶岸。例如，在上圖中叫编，生成的陰影具有 4px 的垂直偏移和 2px 的水平偏移辖佣。
這是內(nèi)聚陰影的第一個(gè)技巧：頁(yè)面上的每個(gè)陰影都應(yīng)該共享相同的比例。這將使每個(gè)元素看起來(lái)都來(lái)自同一個(gè)光源搓逾。
為啥所有元素比例要一樣卷谈？
為什么我建議對(duì)每個(gè)元素使用相同的比例，難道每個(gè)元素相對(duì)于光源的位置都是一樣的嗎霞篡？
- 如果光源就在附近世蔗，每個(gè)元素相對(duì)于光源的角度差異很大。
- 但是如果光源很遠(yuǎn)（比如太陽(yáng)）朗兵，所有元素的陰影角度都是一樣的污淋。
為了便利性考慮，我們一般使用相同的角度余掖，因?yàn)橛?jì)算每個(gè)元素的角度很麻煩寸爆。
2.3海拔
如何創(chuàng)造一種深度視覺(jué)？
查看演示盐欺，注意值是如何變化的：
前兩個(gè)數(shù)字 - 水平和垂直偏移 - 一起縮放赁豆。垂直偏移始終是水平偏移的 2 倍，這里使用了相同的比例冗美。
當(dāng)卡片升高時(shí)魔种，有兩個(gè)變化：
模糊半徑變大。
陰影變得不透明墩衙。
從算法來(lái)講务嫡，這里面又復(fù)雜的數(shù)學(xué)算法。
我們可以從人類常識(shí)來(lái)理解這件事：
如果您在光線充足的房間內(nèi)漆改，請(qǐng)將手按在桌子上，然后慢慢抬起准谚。 注意陰影是如何變化的：它遠(yuǎn)離你的手（更大的偏移）挫剑，它變得更模糊（更大的模糊半徑），它開(kāi)始逐漸消失（更低的不透明度）柱衔。
因?yàn)槲覀兩钪杏泻芏嘟?jīng)驗(yàn)樊破，所以我們不需要記住一堆規(guī)則愉棱。在設(shè)計(jì)陰影時(shí)，我們只需要運(yùn)用我們的常識(shí)哲戚。
2.4總結(jié)：
頁(yè)面上的每個(gè)元素都應(yīng)該由相同的全局光源照亮奔滑。
box-shadow屬性使用水平和垂直偏移表示光源的位置。為確保一致性顺少，每個(gè)陰影應(yīng)使用這兩個(gè)數(shù)字之間的相同比例朋其。隨著元素離用戶越來(lái)越近，偏移量增加脆炎，模糊半徑增加梅猿，陰影的不透明度降低。
可以使用我們的生活常識(shí)跳過(guò)其中的一些計(jì)算秒裕。
3.實(shí)戰(zhàn)技巧
3.1分層
Blender 等現(xiàn)代 3D 插圖工具可以使用光線跟蹤技術(shù)產(chǎn)生逼真的陰影和照明袱蚓。
在光線追蹤中，數(shù)百束光從相機(jī)中射出几蜻，從場(chǎng)景的表面反射數(shù)百次喇潘。這是一種計(jì)算成本很高的技術(shù)；生成單個(gè)圖像可能需要幾分鐘到幾小時(shí)梭稚！
網(wǎng)絡(luò)用戶沒(méi)有那種耐心响蓉，所以box-shadow算法要簡(jiǎn)陋得多，它只實(shí)現(xiàn)了基本的模糊算法哨毁。
因此枫甲，box-shadow陰影永遠(yuǎn)沒(méi)有照片逼真，但我們可以巧妙地優(yōu)化：分層扼褪。
我們不使用單個(gè) box-shadow想幻，而是把多個(gè)陰影疊加起來(lái)，陰影之間的偏移量和半徑略有不同：
Philipp Brumm 一個(gè)很棒的生成分層陰影工具：shadows.brumm.af：
性能權(quán)衡
不可否認(rèn)话浇，分層陰影是美麗的脏毯，但它們確實(shí)需要付出代價(jià)。如果我們疊加 5 個(gè)陰影分層幔崖，我們的設(shè)備必須多做 5 倍的工作食店！
在好的硬件上不是什么大問(wèn)題，但會(huì)減慢在較舊的廉價(jià)移動(dòng)設(shè)備上的渲染速度赏寇。
3.2顏色匹配陰影
到目前為止吉嫩，我們所有的陰影都使用了半透明的黑色，比如hsl(0deg 0% 0% / 0.4)嗅定。這實(shí)際上并不理想自娩。
當(dāng)我們?cè)诒尘邦伾席B加黑色時(shí)，不僅會(huì)使它變暗渠退，也會(huì)使其飽和度降低很多忙迁。
比較這兩個(gè)框：
左邊的盒子使用了透明的黑色脐彩。右側(cè)的框匹配顏色的色調(diào)和飽和度，但降低了亮度姊扔。我們得到了一個(gè)更有活力的盒子惠奸！
當(dāng)我們?yōu)殛幱笆褂幂^深的顏色時(shí)，會(huì)發(fā)生類似的效果：
但是恰梢，左邊的飽和度太低佛南，右邊的飽和度不夠，感覺(jué)更像是光暈而不是陰影删豺！
實(shí)驗(yàn)一下：
通過(guò)匹配色調(diào)并降低飽和度/亮度共虑，我們可以創(chuàng)建一個(gè)真實(shí)的陰影，沒(méi)有那種“褪色”的灰色質(zhì)量呀页。
飽和度和亮度的關(guān)系
如果您熟悉hsl顏色格式妈拌，就會(huì)知道飽和度和亮度是獨(dú)立控制的。
那么蓬蝶，降低亮度似乎也對(duì)飽和度有影響是不是有點(diǎn)奇怪尘分？
這個(gè)問(wèn)題以后有時(shí)間給大家細(xì)講。
3.3總結(jié)
使用分層創(chuàng)建更逼真的陰影丸氛。
調(diào)整顏色以防止“褪色”灰色陰影培愁。
4.最后講一下：filter: drop-shadow
在本文中，我們一直在使用box-shadow屬性缓窜。box-shadow是一個(gè)很好的全面工具定续，但它不是我們?cè)?CSS 中唯一的陰影選項(xiàng)蒙挑。??
看看filter: drop-shadow：
語(yǔ)法幾乎相同御雕，但它產(chǎn)生的陰影不同。這是因?yàn)?code>filter屬性實(shí)際上是SVG過(guò)濾器的 CSS 掛鉤冤留。drop-shadow使用 SVG 高斯模糊恩掷，這是一種與box-shadow`不同的模糊算法倡鲸。
兩者之間還有一些其區(qū)別，drop-shadow有一個(gè)超能力：它能勾勒出元素的形狀黄娘。
例如峭状，如果我們?cè)诰哂型该骱筒煌该飨袼氐膱D像上使用它，陰影將只對(duì)不透明像素起作用逼争，也就是能勾勒出物體的輪廓：
請(qǐng)大喊一句：EDG NB!
這不僅適用于圖像优床，它也適用于 HTML 元素！
希望能啟發(fā)您氮凝，給您一些幫助羔巢！
