拙ウェブサイト内の画像をつかった装飾箇所をcss3とかwebfontとかに置き換えていたところ、表題の件に行き当たりました。今更画像を使うのも嫌なので擬似的な手段ですがcssで処理。ボーダーを引きたい要素に直接ボーダーを充ててもよいのですが、そうするとその要素のposition:relativeの位置がボーダーの内側になりますので、そのぶん修正が必要になります。親要素にrelativeを指定して、before疑似要素でボーダーを引き、その上にafter疑似要素で背景色と同じグラデーションを載せています。
参考にここで充てているCSSをそのまま書いておきます。
/*左横線*/
.bordered-left {
padding:0 0 0 40px;
position:relative;
background:#fff
}
.bordered-left:before, .bordered-left:after {
position:absolute;
left:0;
top:0;
bottom:0;
display:block;
content:' ';
width:2px;
}
.bordered-left:before {
border-left:2px dotted #000;
}
.bordered-left:after {
background:-webkit-linear-gradient( top, white, rgba(255, 255, 255, 0));
background:linear-gradient( to bottom, white, rgba(255, 255, 255, 0));
}
/*下線*/
.bordered-bottom {
padding:0 0 20px;
position:relative;
background:#fff
}
.bordered-bottom:before, .bordered-bottom:after {
position:absolute;
left:0;
right:0;
bottom:0;
display:block;
content:' ';
height:1px;
}
.bordered-bottom:before {
border-bottom:1px dashed #000;
}
.bordered-bottom:after {
background:-webkit-linear-gradient( left, white, rgba(255, 255, 255, 0));
background:linear-gradient( to right, white, rgba(255, 255, 255, 0));
}IEでもフィルターかければ実現できると思うのですが、グラデーション系の設定は面倒くさかった記憶があるので無視する方向で。
