注: 本文摘自 寧靜致遠 - csdn / 但願人長久 千里共嬋娟 - csdn
使用box-shadow屬性可以為元素新增陰影效果, 比如
關鍵字是否必須作用值
h-shadow
是陰影的水平偏移量
長度值，正值代表陰影向右偏移，負值代表陰影向左偏移
v-shadow
是陰影的垂直偏移量
長度值，正值代表陰影向下偏移，負值代表陰影向上偏移
blur
否模糊值
長度值，值越大盒子的邊界越模糊，預設值0，邊界清晰
spread
否陰影的延伸半徑
長度值，正值代表陰影向盒子各個方向延伸擴大，負值代表陰影沿相反方向縮小
color
否陰影的顏色
顏色值，如果省略，瀏覽器會自行選擇乙個顏色
inset
否將外部陰影設定為內部陰影
布林型別
輪廓是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的作用, 比如
關鍵字作用
值outline-width
規定邊框的寬度
數值，可以使用一下常量：
1. thin：規定細輪廓
2. medium：預設，規定中等的輪廓
3. thick：規定粗的輪廓
4. length：允許您規定輪廓粗細的值
5. inherit：規定應該從父元素繼承輪廓寬度的設定
outline-style
規定邊框的樣式
樣式的可選值如下：
1. none：預設，定義無輪廓
2. dotted：定義點狀的輪廓
3. dashed：定義虛線輪廓
4. solid：定義實線輪廓
5. double：定義雙線輪廓，雙線的寬度等同於outline-width的值
6. groove：定義3d凹槽輪廓，此效果取決於outline-color值
7. ridge：定義3d凸槽輪廓，此效果取決於outline-color值
8. inset：定義3d凹邊輪廓，此效果取決於outline-color值
9. outset：定義3d凸邊輪廓，此效果取決於outline-color值
10. inherit：規定應該從父元素繼承輪廓樣式的設定
outline-color
規定邊框的顏色
顏色值線性漸變
實現線性漸變，你至少需要定義兩種顏色的結點，這兩種結點就是你想平穩過渡的顏色，即：其中一種顏色結點為起點，另一種顏色結點為結束點
同時也可以定義漸變的方向，是從上到下漸變，還是從左至右漸變，或者從右至左漸變，預設情況下是從上至下漸變的
當然也可以對角漸變，如：從左上角到右下角
建立重複的線性漸變
角度漸變
to left：設定漸變為從右到左。相當於: 270deg
to right：設定漸變從左到右。相當於: 90deg
to top：設定漸變從下到上。相當於: 0deg
to bottom：設定漸變從上到下。相當於: 180deg (這是預設值，等同於留空不寫)
如果還想更多地控制漸變方向，可以改變漸變的角度
也可以在漸變中使用透明度, 所以我們得使用rgba()函式來定義顏色結點。rgba()函式中的最後乙個引數可以是從 0 到 1 的值，它定義了顏色的透明度：0 表示完全透明，1 表示完全不透明
徑向漸變
徑向漸變是由中心向外漸變的。可以定義它中心 (預設漸變是中心是center) 、形狀（圓形或橢圓形）、大小等
css 輪廓 陰影 圓角
outline 用來設定元素的輪廓線，用法和border一模一樣 輪廓和邊框不同的點，就是輪廓不會影響到可見框的大小 doctype html en utf 8 viewport content width device width,initial scale 1.0 輪廓和圓角 title box...
css3 漸變，陰影，過渡
opacity 透明度，值為0 1，越到1越不透明 rgba r,g,b,a rgb分別表示紅綠藍，可用正整數和分數表示，a是alpha透明度，取值0 1。rgba和opacity透明的不同在於rgba不影響盒子中的字，而opacity連字一起透明。顏色漸變 linear gradient poin...
陰影漸變效果
我們的策劃想要讓原本的假陰影做乙個漸變的效果並且想要讓邊緣模糊。原本的效果時這樣的 可以看到陰影就是乙個黑影並且邊緣有很多鋸齒。首先來分析兩個事情，乙個是鋸齒，乙個時漸變陰影。一 陰影鋸齒 陰影的鋸齒主要是因為畫素不足導致的，這個情況下如果是用shadowmap的話我們可以考慮用pcf等方法處理。市...