中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2024-01-03    分類: 網(wǎng)站建設(shè)

CSS實(shí)現(xiàn)圓角,陰影,透明的方法很多,傳統(tǒng)的方法都比較復(fù)雜,用CSS3就方便很多了,雖然現(xiàn)在各瀏覽器對(duì)CSS3的支持還不是很好,但不久的將來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;

}

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

代碼如下:

.box {

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

border-radius: 1em;

}

但是第二種方法還沒有得到很好的支持,當(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本來就是支持透明的,IE以外的瀏覽器是opacity屬性,IE是filter:alpha.但是,這個(gè)透明度有個(gè)缺點(diǎn),就是它會(huì)使應(yīng)用元素的內(nèi)容也會(huì)繼承它,比如有一個(gè)DIV,

代碼如下:

>

內(nèi)容

如果像上面這樣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使得原來很難實(shí)現(xiàn)的效果變得很簡單,希望各瀏覽器對(duì)CSS3盡快實(shí)現(xiàn)完美支持 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

新聞標(biāo)題:如何使用CSS3實(shí)現(xiàn)圓角,陰影,透明
標(biāo)題鏈接:http://m.rwnh.cn/news38/311738.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供移動(dòng)網(wǎng)站建設(shè)、App設(shè)計(jì)手機(jī)網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)網(wǎng)頁設(shè)計(jì)公司、響應(yīng)式網(wǎng)站

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司
石泉县| 拉孜县| 娄底市| 屏东县| 台东市| 香港| 张掖市| 岐山县| 青岛市| 贡觉县| 额济纳旗| 贵阳市| 团风县| 正宁县| 渭源县| 三河市| 垣曲县| 汉川市| 永胜县| 贵溪市| 城步| 奉新县| 阿合奇县| 大庆市| 淮滨县| 洛浦县| 岳阳县| 平阴县| 美姑县| 怀化市| 铜山县| 察隅县| 冷水江市| 桐乡市| 香港| 青田县| 雅江县| 霍邱县| 合山市| 邵武市| 巴南区|