box-shadow でグラデーションっぽいボーダーを作る

Category : CSS

CSS3 の box-shadow を使ってグラデーションっぽいボーダーを作ります。

まず、box-shadow は、以下のような指定ができます。

box-shadow: (horizontal offset) (vertical offset) (blur distance) (spread distance) (inset);

これらを順に説明すると以下のようになります。

  • シャドウの水平方向オフセット
  • シャドウの垂直方向オフセット
  • ぼかし
  • 広がり
  • inset を指定するかどうか

詳しいことは以下のページに書いてあります。

とりあえず、今回作ったのはこんな感じになっています。

box-shadow でグラデーションっぽいボーダーを作る デモページのキャプチャ画像

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 の指定方法を見れば分かると思います。

おまけ。
いっぱい指定すればこんなものも作れます。使い道はありません。

Trackbacks & Pingbacks

Leave a Reply