html
<div id="wrap">
<h1>box-shadowを使って要素の隅に色をつけています</h1>
</div>
CSS
#wrap{
box-shadow:
30px 30px 50px 0 orange inset,
-30px -30px 50px 0 orange inset;
padding: 45px; /* (box-shadow)offset-x,offset-y * 1.5 */
box-sizing: border-box;
}
解説
box-shadow
inset 影をボックスの内側に描画できる
inset指定で offsetの値をマイナスにすると要素右下から描画される
inset指定で offsetの値をプラスにすると要素左上から描画される
これを組み合わせて要素を囲んでいる。
box-shadowの広がりを使うパターン
#wrap{
box-shadow: 0 0 50px 30px orange inset;
padding: 50px; /* ぼかし値と合わせる */
box-sizing: border-box;
}
Comments