這篇文章主要為大家展示了“怎么使用CSS3實(shí)現(xiàn)圓角,陰影,透明”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用CSS3實(shí)現(xiàn)圓角,陰影,透明”這篇文章吧。

創(chuàng)新互聯(lián)是一家專業(yè)從事網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷、小程序開發(fā)、網(wǎng)站運(yùn)營為一體的建站企業(yè)；在網(wǎng)站建設(shè)告別千篇一律，告別似曾相識，這一次我們重新定義網(wǎng)站建設(shè)，讓您的網(wǎng)站別具一格。響應(yīng)式網(wǎng)站開發(fā)，實(shí)現(xiàn)全網(wǎng)營銷！一站適應(yīng)多終端，一樣的建站，不一樣的體驗(yàn)！

1.圓角

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

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

代碼如下:

.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實(shí)現(xiàn),不需要用圖片.

代碼如下:

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

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

代碼如下:

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

2.陰影

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

代碼如下:

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.但是,這個透明度有個缺點(diǎn),就是它會使應(yīng)用元素的內(nèi)容也會繼承它,比如有一個DIV,

代碼如下:

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

復(fù)制代碼

代碼如下:

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

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

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

以上是“怎么使用CSS3實(shí)現(xiàn)圓角,陰影,透明”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！