ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 角丸、影、transparent_html/css_WEB-ITnose

CSS3 角丸、影、transparent_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:51:521717ブラウズ

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 )、
  1. *4つの角に表示される4つの写真を定義します。 box {
  2. /* フィレットを直接定義する 半径だけで十分です */
  3. Border-radius: 1em;
  4. }
  5. ただし、2 番目の方法は現在、Firefox と Safari (Chrome を使用) では十分にサポートされていません。同じコアも使用できます)、プレフィックスを使用する必要があります
  6. Html コード
  7. .box {
  8. -moz-border-radius: 1em
  9. -webkit-border-radius: 1em; - radius: 1em
  10. }
  11. 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)
    1. }
    2. ;この属性最初の 3 つの属性は赤、緑、青の色を表し、4 番目の属性は透明度で、赤、緑、青はすべて 0 (黒を表す) であるため、rgba(0,0,0,0.8) は透明度を設定します。黒を 0.8 にします。

    CSS3 を使用すると、これまで難しかった効果を簡単に実現できるようになります。私たちは、すべてのブラウザーができるだけ早く CSS3 を完全にサポートすることを願っています。
    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。