CSS3でborder（ボーダー）のグラデーションを実現

CSS2013年2月26日

今までは1pxのボーダーのグラデーションを表現する際、背景画像を使用して実装しなければなりませんでしたが、レスポンシブWebデザインやスマホ専用サイトの構築などにより、CSS3を実際に使用するシーンも多くなってきました。
今回はCSS3のテクニックの一つとして、ボーダーのグラデーションを、画像を使わずにCSSのみで表現する方法をご紹介いたします。

• 実際のサンプル

HTML

<div class="box-bordered-01">
<div class="box-bordered-01-inner">
<p>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ</p>
</div>
</div>

CSS

div.box-bordered-01{
width:300px;
height:100%;
padding:0 1px 0 1px;
display:block;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr='#ccc', EndColorStr='#fff');
background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
background:-moz-linear-gradient(top, #ccc, #fff);
background:linear-gradient(top, #ccc, #fff);
}

div.box-bordered-01 .box-bordered-01-inner{
padding:10px;
background:#fff;
height:100%;
}

解説

実際には「border」というプロパティは使いません。backgroundの背景に敷くグラデーションを使用して実装します。
親のdivの背景にボーダーとして表現したいグラデーションを敷きます。
次にボーダーとして見せたい太さをpaddingで設定します。
最後に子要素のdivの背景を白にすることで、padding部分がボーダーとして表現されます。

ちょっとしたテクニックではありますが、このテクニックを駆使することでレスポンシブWebデザインでも応用できるうえ、画像を使わないのでよりパフォーマンスの高いサイトを作ることが可能になります。

• CSSのコーディングで陥りがちなミスやトラブル
• 設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」

この記事を読んでいる方にオススメの記事

• CSS角丸背景を画像1枚で実装
• CSSFirefox、Safari、chiromeでテキストエリアのリサイズをCSSで制御
• CSSデフォルトで記述しておくと便利なCSS(スタイルシート)
• CSSIE8における拡大縮小バグ
• CSSfloatを使わずに、横並びのリストを実装
• CSS設計・実装を高速化！フロントエンド開発を自動化する「gulp.js」

「CSS」の他の記事を読む

• ※承認制のため、即時には反映されません。