![見出し画像](https://assets.st-note.com/production/uploads/images/68653569/rectangle_large_type_2_ee317e016a12d954c76ae0a4f3166453.jpg?width=1200)
border-imageとborder-radiusの相性が悪かった話
ボタンの縁がグラデーションの角丸ボタンを作りたかったのですが、border-imageとborder-radiusを一緒に指定する単純なことでは無かったので、その対処法です。
基本のマークアップ
HTML
<div>
<a href="#" class="btn">
<span>button</span>
</a>
</div>
CSS
div{
display: flex;
align-items: center;
justify-content: center;
}
▼一緒に指定してみる
角丸にならない...。
CSS
a{
padding: 15px 80px;
border: 4px solid #e14fad;
border-image: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
border-image-slice: 1;
border-radius: 100px;
color: #000;
font-size: 40px;
text-decoration: none;
text-align: center;
}
▼擬似要素を使用して背景を重ねてみる
1.aタグに「border-radius」とフォントサイズなど指定
a{
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 15px 120px;
border: 1px solid #000;/*わかりやすいように入れてます。※最後に消します*/
border-radius: 100px;
color: #000;
font-size: 40px;
text-decoration: none;
text-align: center;
}
2.グラデーションの背景をひいて重ねる
a::before{
position: absolute;
width: 100%;
height: 100%;
border-radius: inherit;/*忘れないように注意*/
background: linear-gradient(90deg, #e14fad 0%, #f9d423 100%);
content: "";
z-index: 1;
}
3.さらにボタンの背景をその上に重ね、幅、高さからborderの幅を引いた値を指定する
a::after{
position: absolute;
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: inherit;/*忘れないように注意*/
background: #fff;
content: "";
z-index: 2;
}
4.テキストをその上に重ね完成です!
span{
position: relative;
z-index: 3;
}
この記事が気に入ったらサポートをしてみませんか?