css如何設定邊框陰影

css中可用box-shadow屬性設定邊框陰影；此屬性會為邊框新增一個或多個陰影，可設定陰影的像素長度，寬度、模糊距離和顏色；語法「box-shadow:h- shadow v-shadow blur spread color inset」。

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

在css中，我們可以透過box-shadow屬性來設定邊框陰影，將陰影套用到文字方塊。此屬性可設定陰影的像素長度，寬度和模糊的距離以及陰影的顏色。

box-shadow屬性可以為框添加一個或多個陰影。此屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵字來規定。省略長度的值是 0。

語法：

box-shadow: h-shadow v-shadow blur spread color inset;

屬性值：

• #h-shadow：是指 陰影水平偏移量 ,其值可正可負，正值，則陰影在物件的右邊，負值，陰影在物件的左邊

• v-shadow：是指 陰影的垂直偏移量 ，其值也可以是正負值，正值，陰影在物件的底部，負值時，陰影在物件的頂部

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

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

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

• inset ：設定從外層的陰影（開始時）改變陰影內側陰影；可選值，可省略。

註：**多層陰影，最內層優先權最高，之後依序降低。

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;

舉例4

#設定正方形的四邊顏色都不一樣，但是陰影模糊半徑都為10px

#

box-shadow:-10px 0px 10px red,   /*左边阴影*/

            0px -10px 10px black,  /*上边阴影*/

            10px 0px 10px green,  /*右边阴影*/

            0px 10px 10px blue;" /*下边阴影*/ >

（學習影片分享：

css影片教學）

以上是css如何設定邊框陰影的詳細內容。更多資訊請關注PHP中文網其他相關文章！