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

創(chuàng)新互聯(lián)專注于甕安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供甕安營銷型網(wǎng)站建設(shè)，甕安網(wǎng)站制作、甕安網(wǎng)頁設(shè)計、甕安網(wǎng)站官網(wǎng)定制、重慶小程序開發(fā)公司服務(wù)，打造甕安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供甕安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

在css中，我們可以通過box-shadow屬性來設(shè)置邊框陰影，將陰影應(yīng)用于文本框。此屬性可設(shè)置陰影的像素長度，寬度和模糊的距離以及陰影的顏色。

box-shadow屬性可以向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關(guān)鍵詞來規(guī)定。省略長度的值是 0。

語法：

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

屬性值：

• h-shadow：是指 陰影水平偏移量 ,其值可正可負(fù)，正值，則陰影在對象的右邊，負(fù)值，陰影在對象的左邊

• v-shadow：是指 陰影的垂直偏移量 ，其值也可以是正負(fù)值，正值，陰影在對象的底部，負(fù)值時，陰影在對象的頂部

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

• spread：陰影擴(kuò)展半徑；此參數(shù)可選，其值可為正負(fù)值，正值，則整個陰影都延展擴(kuò)大，反之，則縮小

• color：陰影顏色；此參數(shù)可選，不設(shè)定任何顏色時，瀏覽器會取默認(rèn)色，但各瀏覽器默認(rèn)色不一樣，特別是在webkit內(nèi)核下的safari和chrome瀏覽器將無色，也就是透明，建議不要省略此參數(shù)

• inset：設(shè)置從外層的陰影（開始時）改變陰影內(nèi)側(cè)陰影；可選值，可省略。

注：**多層陰影，最內(nèi)層優(yōu)先級最高，之后依次降低。

box-shadow的實際運(yùn)用

舉例 1

不設(shè)置X軸與Y軸，設(shè)置值陰影模糊半徑為15px, 它會在本身發(fā)生作用 半徑范圍，顏色

box-shadow: 0 0 15px #f00;

舉例 2

X軸與Y軸設(shè)為正值（正值 X軸向右 Y軸向下）

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

舉例 3

box-shadow：inset 即box-shadow內(nèi)部陰影，與上面寫法相同 唯一不同的是添加了一個inset

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

舉例 4

設(shè)置正方形的四邊顏色都不一樣，但是陰影模糊半徑都為10px

box-shadow:-10px 0px 10px red,   /*左邊陰影*/

            0px -10px 10px black,  /*上邊陰影*/

            10px 0px 10px green,  /*右邊陰影*/

            0px 10px 10px blue;" /*下邊陰影*/ >

看完了這篇文章，相信你對“css設(shè)置邊框陰影的方法”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！