tips

dottedなどのborder要素をグラデーションさせる。

拙ウェブサイト内の画像をつかった装飾箇所をcss3とかwebfontとかに置き換えていたところ、表題の件に行き当たりました。今更画像を使うのも嫌なので擬似的な手段ですがcssで処理。ボーダーを引きたい要素に直接ボーダーを充ててもよいのですが、そうするとその要素のposition:relativeの位置がボーダーの内側になりますので、そのぶん修正が必要になります。親要素にrelativeを指定して、before疑似要素でボーダーを引き、その上にafter疑似要素で背景色と同じグラデーションを載せています。

 

参考にここで充てているCSSをそのまま書いておきます。

###0###

IEでもフィルターかければ実現できると思うのですが、グラデーション系の設定は面倒くさかった記憶があるので無視する方向で。

Your Comment

コードの記述は<pre>または<code>タグで括って下さい。自動的にエスケープされます。

 

右の文字を入力して下さい captcha