任何方法都可以在左右兩側（水平？）獲得箱形陰影，而沒有任何駭客或圖像。我在用：box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);但它給周圍的陰影。我周圍沒有邊界。
3 回答
慕仙森
TA貢獻1827條經驗 獲得超8個贊
經典方法：負向傳播
CSS box-shadow使用4個參數：h-shadow，v-shadow，blur，spread：
box-shadow: 10px 0 8px -8px black;
的V-陰影（中古立式陰影）被設置為0。
該模糊參數添加漸變效果，而且還增加了對垂直邊框（我們想擺脫的一個）一點點影子。
負傳播會減少所有邊界上的陰影：您可以使用它來嘗試消除一點垂直陰影，而又不影響一側的過多陰影（對于5到10像素的小陰影更容易。）
這里是一個小提琴的例子。
第二種方法：絕對div在一邊
在元素中添加一個空的div，并對其進行絕對定位，以免影響元素的內容。
在這里擺弄左陰影的例子。
<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;
}
第三名：遮蔽陰影
如果您有固定的背景，則可以使用兩個具有相同背景色且模糊= 0的遮罩陰影來隱藏側影效果，例如：
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
我再次在黑色陰影上添加了負差（-3px），因此它不會延伸到角落之外。
添加回答
舉報
0/150
提交
取消