ONZE/BLOGオンズ開発ブログ

だいぶ以前に「border要素にグラデーションを施す方法」という記事を公開しましたが、それとほぼ同じテクニックで、「border:dashed;」や「border:dotted;」をグラデーション処理させる方法を考えてみました。

理論としては、親要素に「position:relative;」を指定して、疑似要素:beforeでボーダーを引き、さらに疑似要素:afterで背景色と同じグラデーション処理を施します。

具体的なコードは次のようになりますね。

.border-dashed {
	padding:0;
	margin:0;
	position:relative;
}
.border-dashed:before, .border-dashed:after {
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:block;
	content:'';
	height:1px;
}
.border-dashed:before {
	border-bottom:1px dashed #000;
}
.border-dashed:after {
	background:-webkit-linear-gradient( left, white, rgba(255, 255, 255, 0));
	background:linear-gradient( to right, white, rgba(255, 255, 255, 0));
}

HTML側では、ボーダー・グラデーションを実装したい要素に「class=”border-dashed”」を指定すればOKです。

<p class="border-dashed">この要素にボーダーを引きます。</p> 

下記URLにサンプルを用意しました。

SAMPLE : https://on-ze.com/demo/css3-border-dashed-gradient/

ぜひお試しください！