☰

グラデーションのある border-image と一緒に border-radius を使用することは可能ですか? 質問する

tag-icon • tag-icon css linear-gradients
グラデーションのある border-image と一緒に border-radius を使用することは可能ですか? 質問する

丸い境界線 (border-radius) を持つ入力フィールドをスタイル設定し、その境界線にグラデーションを追加しようとしています。グラデーションと丸い境界線をうまく作成できますが、どちらも一緒に機能しません。グラデーションなしで丸みを帯びているか、グラデーション付きで境界線はありますが角が丸くありません。

-webkit-border-radius: 5px;
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b0bbc4), to(#ced9de)) 1 100%;

両方の CSS プロパティを連携させる方法はありますか、それとも不可能ですか?

ベストアンサー1

同じ問題に取り組んでいます。他のものよりも簡潔な非 SVG ソリューションを見つけました。

div{
  width: 300px;
  height: 80px;
  border: double 1em transparent;
  border-radius: 30px;
  background-image: linear-gradient(white, white), 
                    linear-gradient(to right, green, gold);
  background-origin: border-box;
  background-clip: content-box, border-box;
}
<div></div>

これは私自身の解決策ではなく、ここから引用したものです:https://gist.github.com/stereokai/36dc0095b9d24ce93b045e2ddc60d7a0

おすすめ記事