CSS3實(shí)現(xiàn)圓角、陰影、透明效果并兼容各大瀏覽器
發(fā)布時間:2014-08-08 11:34:38 作者:佚名
我要評論

圓角、陰影、透明的實(shí)現(xiàn)方法有很多,之前的獲取比較復(fù)雜,用CSS3就方便很多了,而且對瀏覽器的支持性也比較好,下面簡單為大家介紹下
CSS實(shí)現(xiàn)圓角,陰影,透明的方法很多,傳統(tǒng)的方法都比較復(fù)雜,用CSS3就方便很多了,雖然現(xiàn)在各瀏覽器對CSS3的支持還不是很好,但不久的將來CSS3就會普及.
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 style="opacity:0.8;filter:alpha(opacity=80); font-weight: bold;">>
內(nèi)容
</div>
如果像上面這樣DIV的背景是透明了,但是內(nèi)容兩個字也透明了,這時可以用RGBa.
.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)完美支持.
1.圓角
CSS3實(shí)現(xiàn)圓角有兩種方法.
第一種是背景圖像,傳統(tǒng)的CSS每個元素只能有一個背景圖像,但是CSS3可以允許一個元素有多個背景圖像.這樣給一個元素添加4個1/4圓的背景圖像,分別位于4個角上就可以實(shí)現(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實(shí)現(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屬性可以直接實(shí)現(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.但是,這個透明度有個缺點(diǎn),就是它會使應(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個屬性表示顏色紅,綠,藍(lán),第四個是透明度.紅綠藍(lán)都是0代表黑色,所以rgba(0,0,0,0.8)就是將黑色的透明度設(shè)置為0.8.
CSS3使得原來很難實(shí)現(xiàn)的效果變得很簡單,希望各瀏覽器對CSS3盡快實(shí)現(xiàn)完美支持.
相關(guān)文章
- 這篇文章主要介紹了CSS3使用border-radius屬性制作圓角,并附上示例代碼,推薦給有相同需求的小伙伴。2014-12-22
IE系列不支持CSS的圓角border-radius等屬性的解決方案
IE系列瀏覽器不支持CSS的圓角(border-radius)等CSS3屬性,如何解決這個問題呢?百度了一下,發(fā)現(xiàn)有個開源的插件可以解決此問題2014-09-15純CSS3實(shí)現(xiàn)圓角效果(含IE兼容解決方法)
CSS3圓角技術(shù)能非常好的美化你的頁面效果,而且避免了使用圖片輔助,一則省去了制作圖片的時間,二則省去了瀏覽器加載圖片造成的延遲和帶寬2014-05-07- 這篇文章主要介紹了css3圓角邊框和邊框陰影示例,需要的朋友可以參考下2014-05-05
- css3自定義漸變圓角按鈕樣式分享,大家參考使用吧2013-12-27
jQuery+css3實(shí)現(xiàn)的超酷無圖片圓角tab選項(xiàng)卡切換效果
依靠CSS3實(shí)現(xiàn)了Tab選項(xiàng)卡標(biāo)簽的圓角效果,無需圖片2013-09-10純CSS3實(shí)現(xiàn)的圓角彩色多功能超酷導(dǎo)航菜單效果
無需任何JS代碼就可以實(shí)現(xiàn)圓角彩色的多功能導(dǎo)航按鈕,簡潔大方2013-08-26純CSS3實(shí)現(xiàn)的紫色性感華麗帶有圓角效果的登錄表單效果
無需任何JS,表單界面豪華靚麗,帶有圓角效果,輸入框也非常高雅2013-07-24CSS3通過樣式定義制作的50個圓角漸變效果的網(wǎng)頁按鈕
無需任何圖片和JS代碼,完全通過樣式定義即可實(shí)現(xiàn)如此漂亮的圓角按鈕,每一個按鈕都各有特點(diǎn)2013-07-24- 圓角邊框的繪制是Web頁面和Web應(yīng)用程序中經(jīng)常用來美化頁面效果的手法之一。今天,小編為大家介紹CSS3提供的可以將矩形變?yōu)閳A角矩形的一個屬性,需要的朋友參考下吧2017-11-09