text-shadow: 1px 2px 3px #FF0000;數(shù)值意思是-----1px水平陰影的位置,允許負值。2px垂直陰影的位置,允許負值。3px模糊的距離。#FF0000陰影的顏色。
為蒲江縣等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及蒲江縣網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、網(wǎng)站設(shè)計、蒲江縣網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求,就會得到認可,從而選擇與我們長期合作。這樣,我們也可以走得更遠!
所有主流瀏覽器都支持 text-shadow 屬性。IE 9 以及更早版本的瀏覽器不支持 text-shadow 屬性。
直接使用box-shadow:5px 5px 10px black inset;屬性設(shè)置樣式樣式就可以了。
前兩個值(5px 5px)是水平和垂直方向的偏移量,正值陰影就會向左向下偏移,負值反之;
第三個值(10px)是設(shè)置模糊距離;
black就是陰影的顏色啦;
最后一個inset是在元素內(nèi)部創(chuàng)建一個陰影,也就是內(nèi)陰影了;
刪除掉inset就是設(shè)置外陰影了
text-shadow是給文本添加陰影效果,box-shadow是給元素塊添加周邊陰影效果。隨著html5和CSS3的普及,這一特殊效果使用越來越普遍。
基本語法是{box-shadow:[inset] x-offset y-offset blur-radius spread-radiuscolor}
對象選擇器 {box-shadow:[投影方式] X軸偏移量 Y軸偏移量陰影模糊半徑 陰影擴展半徑 陰影顏色}
box-shadow屬性的參數(shù)設(shè)置取值:
陰影類型:此參數(shù)可選。如不設(shè)值,默認投影方式是外陰影;如取其唯一值“inset”,其投影為內(nèi)陰影;
X-offset:陰影水平偏移量,其值可以是正負值。如果值為正值,則陰影在對象的右邊,其值為負值時,陰影在對象的左邊;
Y-offset:陰影垂直偏移量,其值也可以是正負值。如果為正值,陰影在對象的底部,其值為負值時,陰影在對象的頂部;
陰影模糊半徑:此參數(shù)可選,,但其值只能是為正值,如果其值為0時,表示陰影不具有模糊效果,其值越大陰影的邊緣就越模糊;
陰影擴展半徑:此參數(shù)可選,其值可以是正負值,如果值為正,則整個陰影都延展擴大,反之值為負值時,則縮?。?/p>
陰影顏色:此參數(shù)可選。如不設(shè)定顏色,瀏覽器會取默認色,但各瀏覽器默認取色不一致,特別是在webkit內(nèi)核下的safari和chrome瀏覽器下表現(xiàn)為透明色,在Firefox/Opera下表現(xiàn)為黑色(已驗證),建議不要省略此參數(shù)。
為了兼容各主流瀏覽器并支持這些主流瀏覽器的較低版本,在基于Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時,我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。
以我的拙見,好的網(wǎng)站和 Web 應(yīng)用程序應(yīng)具有“真實”品質(zhì),實現(xiàn)這種效果涉及很多因素,但陰影是一個重要因素。
但是,當我瀏覽互聯(lián)網(wǎng)時,各大網(wǎng)站大多數(shù)陰影都很虛假,布局盒子被模糊的灰色框覆蓋,看起來并不像陰影。
本文討論的就是如何將常見的陰影轉(zhuǎn)換為美麗的、栩栩如生的陰影:
閱讀受眾
陰影意味著海拔,更大的陰影意味著更高的海拔。
如果我們有策略地使用陰影,我們可以創(chuàng)造深度視覺,就好像頁面上的元素在不同層次上,并且漂浮在背景之上。
例子:
使用陰影的目的:要么增加特定元素的顯著性,要么讓應(yīng)用程序感覺更觸手可及、栩栩如生。
當我想為一個元素添加陰影時,我會添加`box-shadow并修改值,直到得到我喜歡結(jié)果。
問題是: 如果孤立地創(chuàng)建每個陰影,你會得到一堆不協(xié)調(diào)的陰影。如果我們的目標是創(chuàng)造深度視覺,我們需要每個陰影都相互配合。否則,他們看起來就是一堆垃圾:
在自然界中,陰影是光投射出來的。陰影的方向取決于燈光的位置:
一般來說,我們應(yīng)該為頁面上的所有元素確定一個單一的光源,通常位于左上方:
如果 CSS 有一個照明系統(tǒng),我們可以為所有元素指定同一個光源,可惜CSS 沒有這樣的東西。
我們通過指定水平偏移和垂直偏移來移動陰影。例如,在上圖中,生成的陰影具有 4px 的垂直偏移和 2px 的水平偏移。
這是內(nèi)聚陰影的第一個技巧: 頁面上的每個陰影都應(yīng)該共享相同的比例 。 這將使每個元素看起來都來自同一個光源。
為啥所有元素比例要一樣?
為什么我建議對每個元素使用相同的比例,難道每個元素相對于光源的位置都是一樣的嗎?
為了便利性考慮,我們一般使用相同的角度,因為計算每個元素的角度很麻煩。
如何創(chuàng)造一種深度視覺?
查看演示,注意值是如何變化的:
前兩個數(shù)字 - 水平和垂直偏移 - 一起縮放。垂直偏移始終是水平偏移的 2 倍,這里使用了相同的比例。
當卡片升高時,有兩個變化:
從算法來講,這里面又復雜的數(shù)學算法。
我們可以從人類常識來理解這件事:
如果您在光線充足的房間內(nèi),請將手按在桌子上,然后慢慢抬起。 注意陰影是如何變化的:它遠離你的手(更大的偏移),它變得更模糊(更大的模糊半徑),它開始逐漸消失(更低的不透明度)。
因為我們生活中有很多經(jīng)驗,所以我們不需要記住一堆規(guī)則。在設(shè)計陰影時,我們只需要 運用我們的常識 。
Blender 等現(xiàn)代 3D 插圖工具可以使用 光線跟蹤 技術(shù)產(chǎn)生逼真的陰影和照明。
在光線追蹤中,數(shù)百束光從相機中射出,從場景的表面反射數(shù)百次。這是一種計算成本很高的技術(shù);生成單個圖像可能需要幾分鐘到幾小時!
網(wǎng)絡(luò)用戶沒有那種耐心,所以 box-shadow 算法要簡陋得多,它只實現(xiàn)了基本的模糊算法。
因此, box-shadow 陰影永遠沒有照片逼真,但我們可以巧妙地優(yōu)化: 分層 。
我們不使用單個 box-shadow,而是把多個陰影疊加起來,陰影之間的偏移量和半徑略有不同:
Philipp Brumm 一個很棒的生成分層陰影工具: shadows.brumm.af :
性能權(quán)衡
不可否認,分層陰影是美麗的,但它們確實需要付出代價。如果我們疊加 5 個陰影分層,我們的設(shè)備必須多做 5 倍的工作!
在好的硬件上不是什么大問題,但會減慢在較舊的廉價移動設(shè)備上的渲染速度。
到目前為止,我們所有的陰影都使用了半透明的黑色,比如 hsl(0deg 0% 0% / 0.4) 。這實際上并不理想。
當我們在背景顏色上疊加黑色時,不僅會使它變暗,也會使其飽和度降低很多。
比較這兩個框:
左邊的盒子使用了透明的黑色。右側(cè)的框匹配顏色的色調(diào)和飽和度,但降低了亮度。我們得到了一個更有活力的盒子!
當我們?yōu)殛幱笆褂幂^深的顏色時,會發(fā)生類似的效果:
但是,左邊的飽和度太低,右邊的 飽和度不夠 ,感覺更像是光暈而不是陰影!
實驗一下:
通過匹配色調(diào)并降低飽和度/亮度,我們可以創(chuàng)建一個真實的陰影,沒有那種“褪色”的灰色質(zhì)量。
飽和度和亮度的關(guān)系
如果您熟悉 hsl 顏色格式,就會知道飽和度和亮度是獨立控制的。
那么,降低亮度似乎也對飽和度有影響是不是有點奇怪?
這個問題以后有時間給大家細講。
在本文中,我們一直在使用 box-shadow 屬性。 box-shadow 是一個很好的全面工具,但它不是我們在 CSS 中唯一的陰影選項。????
看看 filter: drop-shadow :
語法幾乎相同,但它產(chǎn)生的陰影不同。這是因為 filter 屬性實際上是 SVG 過濾器的 CSS 掛鉤。 drop-shadow使用 SVG 高斯模糊,這是一種與 box-shadow`不同的模糊算法。
兩者之間還有一些其區(qū)別, drop-shadow 有一個超能力: 它能勾勒出元素的形狀。
例如,如果我們在具有透明和不透明像素的圖像上使用它,陰影將只對不透明像素起作用,也就是能勾勒出物體的輪廓:
請大喊一句:EDG NB!
這不僅適用于圖像,它也適用于 HTML 元素!
希望能啟發(fā)您,給您一些幫助!