box-shadow的基本用法
box-shadow 屬性向框添加一個(gè)或多個(gè)陰影欢唾。
box-shadow: h-shadow v-shadow blur spread color inset;
支持逗號(hào)語(yǔ)法簇爆,可以創(chuàng)建任意數(shù)量的投影
值 | 描述 |
---|---|
h-shadow | 必需串塑。水平陰影的位置焕刮。允許負(fù)值靖苇。 |
v-shadow | 必需阱州。垂直陰影的位置。允許負(fù)值勋拟。 |
blur | 可選勋磕。模糊距離。 |
spread | 可選敢靡。陰影的尺寸挂滓。 |
color | 可選。陰影的顏色啸胧。 |
inset | 可選赶站。將外部陰影 (outset) 改為內(nèi)部陰影。 |
.mybox{
margin: 300px auto;
width: 5em;
height: 3em;
background: yellowgreen;
box-shadow: 0 0 0 10px #655,0 0 0 15px deeppink,0 2px 5px 15px rgba(0,0,0,.6);
}
投影的行為不會(huì)影響布局纺念,也不會(huì)受到box-sizing屬性的影響贝椿,不會(huì)響應(yīng)鼠標(biāo)事件。
outline方案
在某些情況下陷谱,我們可能只需要兩層邊框烙博,那就可以先設(shè)置一層常規(guī)邊框瑟蜈,在加上outline(描邊)屬性來(lái)產(chǎn)生外層的邊框。這種方法的一大優(yōu)點(diǎn)在于邊框樣式十分靈活渣窜,不像上面的box-shadow方案只能模擬實(shí)線邊框铺根。因此實(shí)現(xiàn)以上效果還可以使用如下代碼:
background: yellowgreen;
border:10px solid #655;
outline: 5px solid deeppink;
描邊的另一個(gè)好處在于:你可以通過(guò)outline-offset屬性來(lái)控制它跟元素邊緣之間的間距(可接受負(fù)值)
缺點(diǎn):只適用于雙層邊框;描邊不一定貼合圓角乔宿;描邊可以不是矩形(但絕大多數(shù)是)