萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS3實現圓角,陰影,透明

使用CSS3實現圓角,陰影,透明

   CSS實現圓角,陰影,透明的方法很多,傳統的方法都比較復雜,用CSS3就方便很多了,雖然現在各浏覽器對CSS3的支持還不是很好,但不久的將來CSS3就會普及.

  1.圓角

  CSS3實現圓角有兩種方法.

  第一種是背景圖像,傳統的CSS每個元素只能有一個背景圖像,但是CSS3可以允許一個元素有多個背景圖像.這樣給一個元素添加4個1/4圓的背景圖像,分別位於4個角上就可以實現圓角了.

  代碼如下:

  .box {

  /* 首先定義要使用的4幅圖像為背景圖 */

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

  url(/img/top-right.gif),

  url(/img/bottom-left.gif),

  url(/img/bottom-right.gif);

  /* 然後定義不重復顯示 */

  background-repeat: no-repeat,

  no-repeat,

  no-repeat,

  no-repeat;

  /* 最後定義4幅圖分別顯示在4個角上 */

  background-position: top left,

  top right,

  bottom left,

  bottom right;

  }

  第二種方法就簡潔了,直接用CSS實現,不需要用圖片.

  代碼如下:

  .box {

  /* 直接定義圓角的半徑就可以了 */

  border-radius: 1em;

  }

  但是第二種方法還沒有得到很好的支持,當前Firefox和Safari(同一個核心的Chrome也可以),需要使用前綴

  代碼如下:

  .box {

  -moz-border-radius: 1em;

  -webkit-border-radius: 1em;

  border-radius: 1em;

  }

  2.陰影

  CSS3的box-shadow屬性可以直接實現陰影

  代碼如下:

  img {

  -webkit-box-shadow: 3px 3px 6px #666;

  -moz-box-shadow: 3px 3px 6px #666;

  box-shadow: 3px 3px 6px #666;

  }

  這個屬性的4個參數是:垂直偏移,水平偏移,投影的寬度(模糊程度),顏色

  3.透明

  CSS本來就是支持透明的,IE以外的浏覽器是opacity屬性,IE是filter:alpha.但是,這個透明度有個缺點,就是它會使應用元素的內容也會繼承它,比如有一個DIV,

  代碼如下:

  >

  內容

  如果像上面這樣DIV的背景是透明了,但是內容兩個字也透明了,這時可以用RGBa.

  代碼如下:

  .alert {

  rgba(0,0,0,0.8);

  }

  這個屬性前3個屬性表示顏色紅,綠,藍,第四個是透明度.紅綠藍都是0代表黑色,所以rgba(0,0,0,0.8)就是將黑色的透明度設置為0.8.

  CSS3使得原來很難實現的效果變得很簡單,希望各浏覽器對CSS3盡快實現完美支持.

copyright © 萬盛學電腦網 all rights reserved