どうも、くまだです。
グラデーションのスタイルをつけつつ、角を丸めたい。なんならテキストまでグラデーションかけたい。そういうわがまま?な要望が実際にWeb制作案件の中であったので、そのやり方です。
グラデーションで角丸める方法
最初にだめだったパターン。
<div class="box">
<p class="box__text">グラデーションテキスト</p>
</div>
p {
margin: 0;
}
.box {
padding: 8px 10px;
border-radius: 4px;
transition: all .4s;
display: inline-block;
border: 2px solid #c21500;
border-image: linear-gradient(to right, #A42877 0%, #5F319C 100%);
border-image-slice: 1;
}
.box__text {
background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-size: 12px;
line-height: 1.7;
font-weight: 700;
}
![グラデーション](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_568,h_242/https://weblife.ppmp556.com/wp-content/uploads/2023/01/14cfda6f-7167-49e5-87dd-6918b9994db6.png)
一見いけそうだけど、角が丸まらない。border-radiusは、border-imageには効かないみたいです。
.box {
padding: 2px;
background: linear-gradient(to right, #A42877 0%, #5F319C 100%);
border-radius: 4px;
display: inline-block;
}
.box__text {
background: #fff;
font-size: 12px;
line-height: 1.7;
font-weight: 700;
padding: 8px 10px;
border-radius: 4px;
}
![グラデーション](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_682,h_280/https://weblife.ppmp556.com/wp-content/uploads/2023/01/7224e3ed-e87d-4729-a61b-cbac9d1a29f3.png)
バックグラウンドでグラデーションあてて、paddingを線に見た立てています。でも、これだとテキストにグラデーションかかっていません。最初にやったパターンで、テキストにグラデーションの記述をした場合は、以下のコード。
.box__text {
background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-size: 12px;
line-height: 1.7;
font-weight: 700;
padding: 8px 10px;
border-radius: 4px;
}
![グラデーション](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_652,h_270/https://weblife.ppmp556.com/wp-content/uploads/2023/01/dfb543a0-16ee-4fc5-834c-3a07dd79bed2.png)
そしてこれでもうまくいかないので、最終的にはこうなります。
<div class="box">
<div class="box__inner">
<p class="box__text">グラデーションテキスト</p>
</div>
</div>
.box {
padding: 2px;
background: linear-gradient(to right, #A42877 0%, #5F319C 100%);
border-radius: 4px;
display: inline-block;
}
.box__inner {
display: block;
background: #fff;
padding: 6px 8px;
border-radius: 4px;
text-decoration: none;
}
.box__text {
background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
font-size: 12px;
line-height: 1.7;
font-weight: 700;
}
![グラデーション](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_618,h_252/https://weblife.ppmp556.com/wp-content/uploads/2023/01/63343ecd-a87d-45a5-976b-f03a6e1d4445.png)
テキストにグラデーションかけつつ、周りの線にもグラデーションで角丸できました。
なお、テキストをグラデーションにしているのは、下記の部分でグラデーションをクリップしているからです。
background: linear-gradient(92.61deg, #A42877 0%, #5F319C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
あと今回は割愛しましたが、テキストがグラデーションで周りの線もグラデーションで角丸で、ホバーしたら線もテキストも別なグラデーションに変わるのもそのうち。
ここまで読んでくださりありがとうございました。