CSS3中box-shadow的用法介紹
segmentfault 發(fā)布時間：2015-07-15 18:03:08 作者：MockingBird 
我要評論
我要評論這篇文章主要介紹了CSS3中box-shadow的用法,改方法即是作一個盒裝區(qū)域的陰影效果,需要的朋友可以參考下
一般我們通過box-shadow來設(shè)置盒陰影，但是有些屬性我們一般沒有用到，這篇文章將對box-shadow屬性進(jìn)行逐個分析。
語法
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ù)是一個可選值，如果不設(shè)值，其默認(rèn)的投影方式是外陰影；如果取其唯一值“inset”, 其投影就是內(nèi)陰影；
x-offset
水平方向的偏移量；
y-offset
垂直方向的偏移量；
blur-radius模糊半徑
可選，只能為整數(shù)，值越大陰影就越模糊；
spead-radius擴(kuò)展半徑
可選，可以為正數(shù)或者負(fù)數(shù)，如果為負(fù)數(shù)，整個陰影將會縮小；
color陰影顏色
可選，如果不設(shè)定值，瀏覽器將會采用其默認(rèn)色，默認(rèn)色一般是黑色。
一般我們很少用到inset和spead-radius這兩個屬性，如果運(yùn)用好這兩個屬性可以制作出非?？犰诺男Ч?/p>
相關(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ā)光)，通過五個測試通過圖片展示了陰影的不同位置不同效果,需要的朋友可以參考下2017-08-11詳解CSS3陰影 box-shadow的使用和技巧總結(jié)
這篇文章主要介紹了詳解CSS3陰影 box-shadow的使用和技巧總結(jié) ,具有一定的參考價值，有需要的可以了解一下。2016-12-03- CSS3的box-shadow用來制作多重邊框真的比較給力,這也是本文CSS3實現(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屬性實例詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-06-19
