css設置邊框陰影的方法

小編給大家分享一下css設置邊框陰影的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

css中可用box-shadow屬性設置邊框陰影；該屬性向邊框添加一個或多個陰影，可設置陰影的像素長度，寬度、模糊距離和顏色；語法“box-shadow:h-shadow v-shadow blur spread color inset”。

在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設置邊框陰影的方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！