designWeb全般webmasterデザインメモTOPコーディングCSSボーダーにグラデーションをかけたいCSSを使用して背景にグラデーションをかけることはできます。ボーダーもグラデーションをかけて表示させたいこともあるでしょう。そのようなときに、ちょっとした工夫でグラデーションのボーダーを表現することができます。グラデーションボーダーを作る方法まずは、テキストの左側にボーダーを引くという、見出しデザインなどでよく用いられるボーダーの使い方です。単純な1色のべた塗りボーダーではつまらないというときに使えそうなパターンです。#fff;}仕組みとしては、h2要素の背景にグラデーションを敷いて、その中のspan要素の背景を白色にして、ボーダーとして見せたい太さ分だけh2要素の左側にpaddingを設けます。することでグラデーションのボーダーとして表現できます。見出しデザイン(サンプル)次は、ボックスの枠線にグラデーションがかかったような表現をしてみます。border-box;}まずは、ボックスに「transparent」という値を使って透明のボーダーを引きます。background-imageプロパティを使ってグラデーションを敷きます。カンマ区切りで複数指定した場合、先に指定した値の方が上に重なって表示されます。この場合、紫色グラデーションの上に白色グラデーションが重なっている状態となります。あとは、background-originプロパティで背景画像の表示基準ポイントを指定し、background-clipプロパティで表示領域を指定しています。幅や高さを固定したい場合は、「width」や「height」を指定してください。厳密にはボーダーをグラデーションにしているわけではなく、背景画像を利用してボーダーっぽく見せているだけなのですが、どうしてもグラデーションのボーダーを表示させたいという場合には、このような方法も使ってみるのも1つの手ではないでしょうか。