這篇文章主要介紹“如何使用CSS3實(shí)現(xiàn)圓角,陰影,透明效果”，在日常操作中，相信很多人在如何使用CSS3實(shí)現(xiàn)圓角,陰影,透明效果問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”如何使用CSS3實(shí)現(xiàn)圓角,陰影,透明效果”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)成立于2013年，先為港口等服務(wù)建站，港口等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為港口企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

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

1.圓角

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

第一種是背景圖像,傳統(tǒng)的CSS每個(gè)元素只能有一個(gè)背景圖像,但是CSS3可以允許一個(gè)元素有多個(gè)背景圖像.這樣給一個(gè)元素添加4個(gè)1/4圓的背景圖像,分別位于4個(gè)角上就可以實(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個(gè)角上 */  
   background-position: top left,  
                                      top right,  
                                      bottom left,  
                                      bottom right;  
}  

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

代碼如下:

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

 但是第二種方法還沒(méi)有得到很好的支持,當(dāng)前Firefox和Safari(同一個(gè)核心的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;  
}  

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

3.透明

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

代碼如下:

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

代碼如下:

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

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

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

到此，關(guān)于“如何使用CSS3實(shí)現(xiàn)圓角,陰影,透明效果”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！