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

CSS でグラデーション境界線を実現する方法

CSS 境界線にグラデーションを適用することは、予想に反して、思っているほど簡単ではありません。一方、構文 border-color: -moz-linear-gradient(top, #555555, #111111);

グラデーション境界線を正常に作成するには、border-image プロパティを border-style および border-width と組み合わせて使用​​する必要があります。次のコード スニペットは、これを実現する方法を示しています。

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

このコードを次のような HTML 要素に適用すると、

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

から移行するグラデーションの境界線が作成されます。左から右に、指定された境界線の幅に広がります。このコンテキストでは、border-radius は機能しないことに注意してください。

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