CSSで枠線にグラデーションをつけよう!

枠線にグラデーションをつけよう!

枠線にグラデーションをつけてみようか

要素を入れ子にすることで、枠線に濃淡をつけるんだよ

塗りつぶしを使う、ということですか?

その通り、前面と背面で色分けするんだ

なるほど~

それでは、今日のコードだよ

<div style=" padding: 1px;width:300px;border-radius:25px; background: linear-gradient(to right, #00f, #f00);"><div style=" padding: 16px; background-color: #fff;text-align:center;border-radius:25px;">ボックスのグラデーション</div></div>

できました!

入れ子にした要素のbackground-colorで、ボーダーっぽく表現できてるね