CSS で半透明の枠線を作成するにはどうすればよいですか?

CSS で半透明の境界線を確立する方法

CSS で不透明度プロパティを設定すると、その要素を含む要素全体の透明度に影響します。文章。半透明の境界線を作成する場合、単純な方法は利用できません。ただし、rgba カラー形式を使用すると、この効果を実現できます。

たとえば、次のコードは、50% の不透明な赤い境界線を設定します。

div {
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

rgba をサポートしていないブラウザの場合(IE8 以前)、二重境界戦略が必要です。最初の境界線は偽の不透明度に設定され、2 番目の境界線は実際に必要な不透明度を表します。

div {
    border: 1px solid rgb(127, 0, 0);
    border: 1px solid rgba(255, 0, 0, .5);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

最初の境界線は、白の上に 50% の不透明な赤い境界線をシミュレートし、ほとんどのブラウザーで目的の効果を作成します。

背景色が単色の場合でも境界線が透明のままになるようにするには、background-clip:padding-box; を追加します。上記の例に示すように。

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