用CSS3怎么實(shí)現(xiàn)背景漸變

這篇文章主要講解了“用CSS3怎么實(shí)現(xiàn)背景漸變”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“用CSS3怎么實(shí)現(xiàn)背景漸變”吧！

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站建設(shè)、網(wǎng)站制作、北侖網(wǎng)絡(luò)推廣、小程序開發(fā)、北侖網(wǎng)絡(luò)營銷、北侖企業(yè)策劃、北侖品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供北侖建站搭建服務(wù)，24小時(shí)服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

CSS3 之前，必須依賴 Adobe Photoshop 等圖形處理軟件來制作漸變圖，再以背景圖片方式添加給元素。而現(xiàn)在，使用 CSS就可以創(chuàng)造出各種漸變效果了。漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性

CSS Code復(fù)制內(nèi)容到剪貼板

<div class='gradient1'></div>
<div class='gradient2'></div>
<div class='gradient3'></div>

CSS 規(guī)則如下。

CSS Code復(fù)制內(nèi)容到剪貼板

/*為元素盒子添加樣式*/
div {
height:150px;
width:200px;
border:1px solid #ccc;
float:left;
margin:16px;
}
/*例 1：默認(rèn)為從上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例 2：從左到右*/
.gradient2 {
background:linear-gradient(left, #64d1dd, #fff);
}
/*例 3：左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

放射性漸變

在創(chuàng)建放射性漸變時(shí)，可以使用參數(shù)指定形狀、位置、尺寸、顏色和不透明度

CSS Code復(fù)制內(nèi)容到剪貼板

.gradient1 {
background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
}
.gradient2 {
background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);
}
.gradient3 {
background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd,
#4947ba);
}

感謝各位的閱讀，以上就是“用CSS3怎么實(shí)現(xiàn)背景漸變”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)用CSS3怎么實(shí)現(xiàn)背景漸變這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

當(dāng)前題目：用CSS3怎么實(shí)現(xiàn)背景漸變
鏈接分享：http://muchs.cn/article38/ijcosp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站排名、網(wǎng)站制作、Google、網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(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)

猜你還喜歡下面的內(nèi)容