任何方法都可以在左右兩側(cè)（水平？）獲得箱形陰影，而沒(méi)有任何駭客或圖像。我在用：box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);但它給周?chē)年幱?。我周?chē)鷽](méi)有邊界。
3 回答
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
經(jīng)典方法：負(fù)向傳播
CSS box-shadow使用4個(gè)參數(shù)：h-shadow，v-shadow，blur，spread：
box-shadow: 10px 0 8px -8px black;
的V-陰影（中古立式陰影）被設(shè)置為0。
該模糊參數(shù)添加漸變效果，而且還增加了對(duì)垂直邊框（我們想擺脫的一個(gè)）一點(diǎn)點(diǎn)影子。
負(fù)傳播會(huì)減少所有邊界上的陰影：您可以使用它來(lái)嘗試消除一點(diǎn)垂直陰影，而又不影響一側(cè)的過(guò)多陰影（對(duì)于5到10像素的小陰影更容易。）
這里是一個(gè)小提琴的例子。
第二種方法：絕對(duì)div在一邊
在元素中添加一個(gè)空的div，并對(duì)其進(jìn)行絕對(duì)定位，以免影響元素的內(nèi)容。
在這里擺弄左陰影的例子。
<div id="container">
<div class="shadow"></div>
</div>
.shadow{
position:absolute;
height: 100%;
width: 4px;
left:0px;
top:0px;
box-shadow: -4px 0 3px black;
}
第三名：遮蔽陰影
如果您有固定的背景，則可以使用兩個(gè)具有相同背景色且模糊= 0的遮罩陰影來(lái)隱藏側(cè)影效果，例如：
box-shadow:
0 -6px white, // Top Masking Shadow
0 6px white, // Bottom Masking Shadow
7px 0 4px -3px black, // Left-shadow
-7px 0 4px -3px black; // Right-shadow
我再次在黑色陰影上添加了負(fù)差（-3px），因此它不會(huì)延伸到角落之外。
添加回答
舉報(bào)
0/150
提交
取消