現在的位置: 首頁 > web前端 > 正文

CSS3中box shadow屬性怎么用

2020年07月14日 web前端 ⁄ 共 864字 ⁄ 字號 評論關閉

  box-shadow:none|inset(可選值,不設置,為外投影,設置,為內投影)x-offset(陰影水平偏移量,正方向為right)y-offset(陰影垂直偏移量,正方向為bottom)blur-radius(陰影模糊半徑,為正,0為無模糊效果,值越大,越模糊)spread-radius(陰影擴展半徑,可正可負)color(設置對象的陰影的顏色)


  box-shadow語法屬性值描述


  1.陰影類型:此參數可選,默認的投影方式是外陰影;如果取其唯一值“inset”,就是將外陰影變成內陰影


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


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


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


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


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


  注:多層陰影,最內層優先級最高,之后依次降低。使用逗號“,”隔開。


  box-shadow的實際運用


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


  box-shadow:0015px#f00;


  舉例2:X軸與Y軸設為正值(正值X軸向右Y軸向下)


  box-shadow:4px4px15px#f00;


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


  box-shadow:0015px#f00inset;


  總之,box-shadow給大家簡單的介紹了一些,希望大家多看看。

抱歉!評論已關閉.

奔驰宝马破解版下载 北京体彩网-快中彩 金7乐走势图怎么看 上海十一选五直选走势图 七星体育app下载安装 澳洲快乐8开奖时间 看股票涨跌 kiko意大利官网 江苏快三官网 国内如何炒原油期货 五分彩提现提不出来 慧投金融 快乐十分开奖官网 中宠股份股票 青海十一选五基本走势图 恒丰配资 上海天天选4直播