html - ボックスの影の右側を削除

Question

私が求めているものと同様の投稿をたくさん見つけて、これに何時間も取り組んできましたが、最終的には外部のアドバイスを求める必要があると判断しました:)。

ボックスシャドウを使用して div の 3 つの側面をシャドウしようとしています。右側をシャドウなしにしたいのですが、上部のシャドウを解除する方法に関する投稿がたくさんあることを理解できませんが、数え切れないほどの努力の後、これを適用することさえできませんでした.

Answer 1

2つのオプションがあると思います：

1) 影の水平方向の配置を左 (負の値) に設定します。

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

この方法では、上部と下部で同じ影のサイズはありません。

2) div 内で div を使用し、それぞれに影を適用します。

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

次に、必要なサイズに合わせてサイズを調整する必要があります。

ここに jsfiddle があります: http://jsfiddle.net/EwgKF/19/

Answer 2

: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
}

Answer 3

この例を使用してみてください右側の境界線がありません：

JsBinデモ