刪除盒子影子的右側

我發現了很多類似於我所要求的帖子，並且已經在此工作了幾個小時，最後決定我應該尋求一些外部建議:)。刪除盒子影子的右側

我正在試圖使用box-shadow來遮蔽div的三面我希望右面沒有影子，但無法弄清楚有很多關於如何取消遮蔽頂部的帖子，但經過無數的努力後，我可以甚至沒有應用這個。

2012-12-28 Otis Wright

請在http://jsfiddle.net/創建示例要不然發佈您的代碼你已經嘗試 –

我知道這是一個過時的歌曲，但你知道其中的box-shadow是div的大小應用？即div是否具有設定的大小或靈活性？ – Luke

我覺得你有2種選擇：

1）你的影子的水平對齊方式設置爲左（負值）。

box-shadow: -30px 0px 10px 10px #888888;

雖然這樣你就不必在頂部和底部的陰影一樣大小。

2）在div中使用div並對每個div應用陰影。

.div1 
{ 
    box-shadow: -30px 10px 20px 10px #888888; 
} 
.div2 
{ 
    box-shadow: -30px -10px 20px 10px #888888; 
}

那麼你就必須ajust你想要的大小。

在這裏，有一個的jsfiddle：http://jsfiddle.net/EwgKF/19/

來源

2012-12-28 09:49:27 Ivozor

非常感謝你:)你是一個傳奇人物。 –

嘿，我只是回答了你......而且它沒問題......但你不接受它......所以也許吧！：P – Ivozor

-2

嘗試使用這個例子還沒有右側邊框：

JsBin Demo

來源

2012-12-28 09:38:26

使用:after僞元素：http://jsfiddle.net/romiguelangel/YCh6F/

HTML

<ul> 
    <li><a href="#">item</a></li> 
    <li class="hello"><a href="#">item with after element</a></li> 
</ul>

CSS

li { 
    display: block; 
    position: relative; 
    -webkit-box-shadow: 0 0 2px 1px gray 
} 

.hello:after{ 
    display: block; 
    background-color: #f3f5f6; 
    width: 20px; 
    height: 38px; 
    content: " "; 
    position: absolute; 
    top: 0; 
    right: -10px 
}

來源

2013-12-30 17:33:47 romiguelangel

如果您願意僅使用partial support的實驗技術，則可以使用clip path property。

這將爲您提供完全相同的效果：頂部，左側和底部邊緣的正常箱形陰影以及右側邊緣的乾淨切割。對於這個問題，許多其他的解決方案導致陰影「消散」，因爲它們靠近沒有陰影的邊緣。

你的情況你可以使用clip-path：inset（px px px px）;其中像素值是從所討論的邊緣計算出來的（見下文）。

#container { 
    box-shadow: 0 0 5px rgba(0,0,0,0.8); 
    clip-path: inset(-5px 0px -5px -5px); 
}

這將在夾在div在一個問題：

5個像素的頂部邊緣之上（以包括陰影）
0從右側邊緣像素（以隱藏陰影）
5個像素的底部邊緣上方（包括陰影）
5個像素的左邊緣的外側（包括陰影）

請注意，像素值之間不需要逗號。

div的大小可以是靈活的。

來源

2017-03-17 02:27:29 Luke

刪除盒子影子的右側

回答

相關問題