画像を使用せずにCSSで半透明の境界線を作成するにはどうすればよいですか?

画像なしの CSS 境界線の透明度

残念ながら、CSS には境界線の不透明度プロパティは存在しません。ただし、他の方法を使用して半透明の境界線を作成するテクニックもあります。

rgba カラー形式

rgba を使用して半透明の境界線を作成するには、次の構文を使用します。 :

div {
    border: 1px solid rgba(red, green, blue, opacity);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for modern browsers */
}

たとえば、不透明度 50% の赤い境界線は、次のように rgba を使用して作成できます:

div {
    border: 1px solid rgba(255, 0, 0, .5);
}

二重境界線宣言 (古いブラウザの場合)

IE8 以前など、rgba をサポートしていないブラウザの場合、回避策は 2 つの境界線宣言を使用することです。

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
}

最初の宣言は偽の不透明度を提供し、2 番目の宣言は偽の不透明度を提供します。実際の不透明度を使用します。最新のブラウザでは 2 番目の宣言が優先されますが、古いブラウザでは最初の宣言が使用されます。

注: 背景が表示されたときに境界線が透明のままであることを保証するために、background-clip:padding-box プロパティが追加されています。色が適用されます。

以上が画像を使用せずにCSSで半透明の境界線を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。