border-radiusにグラデーションが使えない！？ボーダーをグラデーションにしてさらに角を丸める
先日回ってきたデザインに、これがありました。
ボタンの縁がグラデーションで両端を丸くするデザイン。
border-imageにlinear-gradient()を指定して、
border-radiusを指定したら、なんと、丸くならないじゃないの！？
というわけで、対処法を。
要素を重ねて背景にグラデーション
はい、簡単な対処法ですね。
親要素の背景にグラデーションを指定して、
縁取りの太さを残して子要素を作成、背景は白。
親、子とものborder-radiusを指定したら完成です。
↓こんな感じ
ボタン
HTML
- <div class="parent">
- <div class="child">ボタン</div>
- </div>
CSS
- .parent {
- background: linear-gradient(45deg,#007eff,#ff17b1);
- border-radius: 16px;
- padding: 1px;
- width: 100px;
- }
- .child {
- background-color: #fff;
- border-radius: 15px;
- height: 30px;
- text-align: center;
- }
border-imageはborderとは異なる まとめ
border-radiusはborder-imageには効かないのですねぇ。
というわけで、無駄に要素を重ねたくはないのですが、
要素を重ねて背景でborderを表現しました。
効くように変更されないかな〜、ではでは！