[解決済み] 要素の片側にボックスシャドウを追加するにはどうすればよいですか？

質問

の上にボックスシャドウを作成する必要があります。 block 要素の右側にのみ（例えば）表示されます。これを行うには、内側の要素を box-shadow を外側の padding-right と overflow:hidden; ということで、影の他の3辺は見えません。

何か良い方法はないでしょうか？例えば box-shadow-right ?

EDIT : 私が意図しているのは のみ シャドウの垂直部分 と全く同じです。 repeat-y ルールの background:url(shadow.png) 100% 0% repeat-y を実行することになります。

解決方法は？

はい、box-shadowルールのshadow spreadプロパティを使用することができます。

.myDiv
{
  border: 1px solid #333;
  width: 100px;
  height: 100px;
  box-shadow: 10px 0 5px -2px #888;
}

<div class="myDiv"></div>

そこで4つ目のプロパティ -2px は影の広がりで、これを使うと影の広がりを変え、影が片側だけにあるように見せることができます。

これもシャドウの位置決めルールを使用します 10px は右に送り（水平方向のオフセット）、そして 0px は要素の下を維持します（垂直オフセット）。

5px はぼかしの半径 :)

ここに例があります .