CSS3中如何使用box shadow屬性

今天就跟大家聊聊有關(guān)CSS3中如何使用box shadow屬性，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

　　box-shadow:none|inset（可選值，不設(shè)置，為外投影，設(shè)置，為內(nèi)投影）x-offset（陰影水平偏移量，正方向?yàn)閞ight）y-offset（陰影垂直偏移量，正方向?yàn)閎ottom）blur-radius（陰影模糊半徑，為正，0為無模糊效果，值越大，越模糊）spread-radius（陰影擴(kuò)展半徑，可正可負(fù)）color（設(shè)置對象的陰影的顏色）

　　box-shadow語法屬性值描述

　　1.陰影類型：此參數(shù)可選，默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”,就是將外陰影變成內(nèi)陰影

　　2.X-offset:是指陰影水平偏移量,其值可正可負(fù)，正值，則陰影在對象的右邊，負(fù)值，陰影在對象的左邊

　　3.Y-offset:是指陰影的垂直偏移量，其值也可以是正負(fù)值，正值，陰影在對象的底部，負(fù)值時(shí)，陰影在對象的頂部

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

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

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

　　注：多層陰影，最內(nèi)層優(yōu)先級最高，之后依次降低。使用逗號“，”隔開。

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

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

　　box-shadow:0015px#f00;

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

　　box-shadow:4px4px15px#f00;

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

　　box-shadow:0015px#f00inset;

看完上述內(nèi)容，你們對CSS3中如何使用box shadow屬性有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。