ある要素にボックス シャドウを作成する必要がありますblockが、(たとえば) 右側にのみ作成する必要があります。これを行うには、内側の要素を でbox-shadow外側の要素にラップしpadding-right、overflow:hidden;シャドウの他の 3 つの側面が見えないようにする必要があります。
これを実現するより良い方法はありますか? 例えばbox-shadow-right?
編集: 私の意図は、影の垂直部分のみを作成することです。repeat-yルールがbackground:url(shadow.png) 100% 0% repeat-y行うこととまったく同じです。
ベストアンサー1
はい、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ぼかしの半径です:)