HOME > CSS > ドットの下線をCSS&border:dotted;以外で表現する

ドットの下線をCSS&border:dotted;以外で表現する

ドットの下線。よほどでない限り、border:dotted;で妥協していました。明らかに◎のときは画像にしてたり。しかし今日からは迷わずCSSだけでOK。

radial-gradientを使う

CSSでドットの下線を再現するためにはradial-gradientを使います。
ほぼ、どのブラウザでも使えます(Can I use radial-gradient)。

.bd-btm-dotted{
	background-image: radial-gradient(#C5DAE5 30%, transparent 30%);
	background-size: 6px 6px;/*imageで指定した割合が100%の時の値*/
	background-position: bottom;
	background-repeat: repeat-x;
}

表示サンプル

ここにドットの下線を表示します

参考サイト