CSS3 角丸、影、transparent_html/css_WEB-ITnose

CSS で角丸、影、透明度を実現するには多くの方法がありますが、CSS3 を使用する方がはるかに便利です。

1. 角を丸める

CSS3 で角を丸くするには 2 つの方法があります

1 つ目は、各要素に対して背景画像を 1 つだけ持つことができます。ただし、CSS3 では、要素に複数の背景画像を含めることができます。このように、要素に 4 つの 1/4 円の背景画像をそれぞれ 4 つの角に追加すると、角を丸くすることができます。

.box {

最初に背景画像として使用する 4 つの画像を定義します */

background-image: url(/img/top-left.gif),

1 img/bottom-left.gif ）、

2. *4つの角に表示される4つの写真を定義します。 box {
/* フィレットを直接定義する 半径だけで十分です */
Border-radius: 1em;
}
ただし、2 番目の方法は現在、Firefox と Safari (Chrome を使用) では十分にサポートされていません。同じコアも使用できます)、プレフィックスを使用する必要があります
Html コード
.box {
-moz-border-radius: 1em
-webkit-border-radius: 1em; - radius: 1em
}
2. Shadow

CSS3 の box-shadow プロパティは、Shadow を直接実装できます

1. img {
2. -webkit-box-shadow: 3px 3px 6px #666;
3. -moz-box-shadow: 3px 3px 6px #666;
4. }

この属性の 4 つのパラメータは: 垂直オフセット、水平オフセット、投影の幅 (ぼかし度)、色

3. 透明度

CSS は元々透明度をサポートしており、IE 以外のブラウザでもサポートされています。 IE は filter:alpha ですが、この透過性には欠点があります。つまり、DIV、

Html コード

>

コンテンツ

のように背景が透明な場合ただし、コンテンツも透明なので、RGBa を使用できます。

Html code

.alert {

rgba(0,0,0,0.8)
}
;この属性最初の 3 つの属性は赤、緑、青の色を表し、4 番目の属性は透明度で、赤、緑、青はすべて 0 (黒を表す) であるため、rgba(0,0,0,0.8) は透明度を設定します。黒を 0.8 にします。

CSS3 を使用すると、これまで難しかった効果を簡単に実現できるようになります。私たちは、すべてのブラウザーができるだけ早く CSS3 を完全にサポートすることを願っています。