css3中box-shadow的用法是什麼

在css3中，「box-shadow」屬性用於在框架中添加一個或多個陰影，並且設定陰影的樣式，語法為「box-shadow:水平陰影垂直陰影模糊距離陰影的尺寸陰影的顏色將外部陰影改為內部陰影;」。

本教學操作環境：windows10系統、CSS3&&HTML5版、Dell G3電腦。

css3中box-shadow的用法是什麼

box-shadow: none | inset（可選值，不設置，為外投影，設置，為內投影） x-offset（陰影水平偏移量，正方向為right） y-offset（陰影垂直偏移量，正方向為bottom） blur-radius（陰影模糊半徑，為正，0為無模糊效果，數值越大，越模糊） spread-radius（陰影擴充半徑，可正可負） color（設定物件的陰影的顏色）

屬性值說明:

1.陰影類型：此參數可選，預設的投影方式是外陰影；若取其唯一值「inset」,就是將外陰影變成內陰影

2. X-offset:是指陰影水平偏移量,其值可正可負，正值，則陰影在物件的右邊，負值，陰影在物件的左邊

3. Y-offset:是指陰影的垂直偏移量，其值也可以是正負值，正值，陰影在物件的底部，負值時，陰影在物件的頂部

4.陰影模糊半徑：此參數是可選，只能為正值，如果其值為0時，表示陰影不具有模糊效果，數值越大陰影的邊緣就越模糊

5. 陰影擴展半徑：此參數可選，其值可為正負值，正值，則整個陰影都延展擴大，反之，則縮小

6.陰影顏色：此參數可選，不設定任何顏色時，瀏覽器會取預設色，但各瀏覽器預設色不一樣，特別是在webkit核心下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數。

**註：**多層陰影，最內層優先級最高，之後依序降低。使用逗號“，”隔開。

box-shadow的實際運用

舉例1：不設定X軸與Y軸，設定值陰影模糊半徑為15px, 它會在本身發生作用 半徑範圍，顏色。

box-shadow: 0 0 15px #f00;

效果圖：

範例2： X軸與Y軸設為正值（正值 X軸向右 Y軸向下）

box-shadow:4px 4px 15px #f00;

效果圖：

範例3：box-shadow：inset 即box-shadow內部陰影，與上面寫法相同 唯一不同的是添加了一個inset

box-shadow:0 0 15px #f00 inset;

效果圖：

（學習影片分享：css影片教學）

以上是css3中box-shadow的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！