box-shadowでグラデーションっぽいボーダーを作る
公開：
更新：
CSS3のbox-shadowを使ってグラデーションっぽいボーダーを作ります。
まず、box-shadowは、以下のような指定ができます。
box-shadow: (horizontal offset) (vertical offset) (blur distance) (spread distance) (inset);これらを順に説明すると以下のようになります。
- シャドウの水平方向オフセット
- シャドウの垂直方向オフセット
- ぼかし
- 広がり
insetを指定するかどうか
詳しいことは以下のページに書いてあります。
CSS Backgrounds and Borders Module Level 3 - The ‘box-shadow’ property
とりあえず、今回作ったのはこんな感じになっています。
box-shadowでグラデーションっぽいボーダーを作る デモページ
指定は以下。
#gradient-border {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1),
0 0 0 2px rgba(0, 0, 0, 0.1),
0 0 0 3px rgba(0, 0, 0, 0.1),
0 0 0 4px rgba(0, 0, 0, 0.1),
0 0 0 5px rgba(0, 0, 0, 0.1),
0 0 0 6px rgba(0, 0, 0, 0.1),
0 0 0 7px rgba(0, 0, 0, 0.1),
0 0 0 8px rgba(0, 0, 0, 0.1),
0 0 0 9px rgba(0, 0, 0, 0.1),
0 0 0 10px rgba(0, 0, 0, 0.1);
}
これにベンダープレフィクスつきの指定を加えたものです。
なぜこんな表示になるかはbox-shadowの指定方法を見れば分かると思います。
おまけ。
いっぱい指定すればこんなものも作れます。使い道はありません。