通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。

しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。
何か他の方法を探して代替しなければなりません。
さて。ここでブレイクスルー。

今回は［CSS3］のテクニックの１つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。

まずはサンプルをご覧ください。
綺麗なグラデーションになっていますね。

ボーダー・グラデーション：サンプル

HTML の記述は以下のように。

<div id="sample">
<p>このボックスの枠（border）を、CSS3 のテクニックを使ってグラデーション化させます。</p>
</div>

そして［CSS］での指定はこちらになります。

#sample {
width:100%;
height:100%;
border-left:1px solid #ff0000;
border-right:1px solid #0000ff;
}

#sample:before,
#sample:after {
content:"";
display:block;
height:1px;
width:100%;
	background:-webkit-gradient(linear, left top, right bottom, from(#f00), to(#00f));
	background:-moz-linear-gradient(left, #f00, #00f);
	background:linear-gradient(left, #f00, #00f);
}

今のところ、CSS で［border］というプロパティにグラデーションをかける方法はありませんから、実際には［background］プロパティを利用して実装することになります。

今回のケースでは、疑似要素［:before］と［:after］に、height:1px; を指定して、その背景としてグラデーションを施すことによってボーダーを実現しています。

ちょっとしたテクニックですが、この方法を駆使することでレスポンシブ・デザインでも対応できるうえ、画像を使わないのでよりパフォーマンスの高いサイトを作ることが可能になります。
余計なタグを挿入して HTML を汚すこともありませんし、応用すれば様々な表現も可能になります。

覚えておいて損はないですね。

ボーダー・グラデーション：サンプル