CSS3中box-shadow的用法介紹
segmentfault 發(fā)布時(shí)間：2015-07-15 18:03:08 作者：MockingBird 
我要評論
我要評論這篇文章主要介紹了CSS3中box-shadow的用法,改方法即是作一個(gè)盒裝區(qū)域的陰影效果,需要的朋友可以參考下
一般我們通過box-shadow來設(shè)置盒陰影，但是有些屬性我們一般沒有用到，這篇文章將對box-shadow屬性進(jìn)行逐個(gè)分析。
語法
CSS Code復(fù)制內(nèi)容到剪貼板
- E {box-shadow:inset x-offset y-offset blur-radius spread-radius color}
即：
對象選擇器 {box-shadow:投影方式 X軸偏移量 Y軸偏移量 陰影模糊半徑 陰影擴(kuò)展半徑 陰影顏色}
inset 投影方式
此參數(shù)是一個(gè)可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”, 其投影就是內(nèi)陰影；
x-offset
水平方向的偏移量；
y-offset
垂直方向的偏移量；
blur-radius模糊半徑
可選，只能為整數(shù)，值越大陰影就越模糊；
spead-radius擴(kuò)展半徑
可選，可以為正數(shù)或者負(fù)數(shù)，如果為負(fù)數(shù)，整個(gè)陰影將會(huì)縮?。?br /> color陰影顏色
可選，如果不設(shè)定值，瀏覽器將會(huì)采用其默認(rèn)色，默認(rèn)色一般是黑色。
一般我們很少用到inset和spead-radius這兩個(gè)屬性，如果運(yùn)用好這兩個(gè)屬性可以制作出非?？犰诺男Ч?。
相關(guān)文章
CSS3陰影效果樣式庫box-shadows.css 53種
box-shadows.css是一套集成了的CSS3陰影效果的CSS樣式庫，共有53種效果，只需要在元素上添加相應(yīng)的class類，既可以快速的生成相應(yīng)的陰影效果2018-06-13
css3 box-shadow陰影(外陰影與外發(fā)光)圖示講解
這篇文章主要介紹了css3 box-shadow陰影(外陰影與外發(fā)光)，通過五個(gè)測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-03CSS3實(shí)現(xiàn)多重邊框的方法總結(jié)
CSS3的box-shadow用來制作多重邊框真的比較給力,這也是本文CSS3實(shí)現(xiàn)多重邊框的方法總結(jié)的重點(diǎn),不過在此之前我們還是先來看一下兼容性較好的傳統(tǒng)方式:2016-05-31詳解CSS3的box-shadow屬性制作邊框陰影效果的方法
這篇文章主要介紹了CSS3的box-shadow屬性制作邊框陰影效果的方法,box-shadow屬性還是十分強(qiáng)大的,能設(shè)定陰影的水平或垂直位置,以及陰影的顏色和尺寸等,需要的朋友可以參考下2016-05-10
這篇文章主要介紹了CSS3 box-shadow屬性實(shí)例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-19
