CSS でグラデーションの境界線を持つ丸い角を作成するにはどうすればよいですか?

境界線半径とグラデーション境界線画像の実装

丸い境界線とグラデーションを使用して要素をスタイル設定するのは難しい場合があります。 border-radius プロパティと border-image プロパティの両方を組み合わせようとすると、多くの場合、グラデーションなしで角が丸くなるか、丸みなしでグラデーションの境界線が作成されます。

解決策:

幸いなことに、 CSS 技術を組み合わせて使用​​することで、丸い角とグラデーションの境界線の両方を実現できます。より簡潔なアプローチを提供する非 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;
}

説明:

• 透明な二重境界線が幅を設定し、最初の部分を削除します。境界線の色。
• background-image プロパティは、最初の白と色付きの 2 つのグラデーションを作成します。
• background-origin: border-box は、丸い角に合わせて境界線にグラデーションを配置します。
• background-clip: content-box、border-box は、境界線のグラデーションを制御します。グラデーションが切り取られ、境界線がグラデーションで塗りつぶされたままになり、内側の領域が白のままになります。

この手法では、丸い角とグラデーションの境界線をスタイリッシュに組み合わせることができます。

以上がCSS でグラデーションの境界線を持つ丸い角を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。