欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用CSS3實現(xiàn)圓角,陰影,透明

  發(fā)布時間：2014-12-23 16:14:00   作者：佚名   我要評論
這篇文章主要介紹了使用CSS3實現(xiàn)圓角,陰影,透明的方法和示例代碼分析，非常的簡單實用，這里推薦給小伙伴們。

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

1.圓角

CSS3實現(xiàn)圓角有兩種方法.

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


復(fù)制代碼
代碼如下:

.box {
/* 首先定義要使用的4幅圖像為背景圖 */
background-image: url(/img/top-left.gif),
url(/img/top-right.gif),
url(/img/bottom-left.gif),
url(/img/bottom-right.gif);
/* 然后定義不重復(fù)顯示 */
background-repeat: no-repeat,
no-repeat,
no-repeat,
no-repeat;
/* 最后定義4幅圖分別顯示在4個角上 */
background-position: top left,
top right,
bottom left,
bottom right;
}

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


復(fù)制代碼
代碼如下:

.box {
/* 直接定義圓角的半徑就可以了 */
border-radius: 1em;
}

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


復(fù)制代碼
代碼如下:

.box {
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
border-radius: 1em;
}

2.陰影

CSS3的box-shadow屬性可以直接實現(xiàn)陰影


復(fù)制代碼
代碼如下:

img {
-webkit-box-shadow: 3px 3px 6px #666;
-moz-box-shadow: 3px 3px 6px #666;
box-shadow: 3px 3px 6px #666;
}

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

3.透明

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


復(fù)制代碼
代碼如下:

<div style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
內(nèi)容
</div>

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


復(fù)制代碼
代碼如下:

.alert {
rgba(0,0,0,0.8);
}

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

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

相關(guān)文章

最新評論