最新文章專題視頻專題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專題1關(guān)鍵字專題50關(guān)鍵字專題500關(guān)鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專題關(guān)鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
當(dāng)前位置： 首頁(yè) - 科技 - 知識(shí)百科 - 正文

CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果

來(lái)源：懂視網(wǎng) 責(zé)編：小采 時(shí)間：2020-11-02 22:13:26
文檔

CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果

CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果:對(duì)于前端學(xué)習(xí)的小伙伴們來(lái)說(shuō)，漸變效果肯定并不陌生。大家應(yīng)該都知道css3中有線性漸變和徑向漸變。并且在前面的文章中，我們也已經(jīng)給大家介紹了CSS3實(shí)現(xiàn)線性漸變的效果和CSS3實(shí)現(xiàn)徑向漸變的效果，需要的朋友可以先參考了解。推薦參考學(xué)習(xí)：《CSS3教程》本節(jié)
推薦度：
導(dǎo)讀CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果:對(duì)于前端學(xué)習(xí)的小伙伴們來(lái)說(shuō)，漸變效果肯定并不陌生。大家應(yīng)該都知道css3中有線性漸變和徑向漸變。并且在前面的文章中，我們也已經(jīng)給大家介紹了CSS3實(shí)現(xiàn)線性漸變的效果和CSS3實(shí)現(xiàn)徑向漸變的效果，需要的朋友可以先參考了解。推薦參考學(xué)習(xí)：《CSS3教程》本節(jié)
對(duì)于前端學(xué)習(xí)的小伙伴們來(lái)說(shuō)，漸變效果肯定并不陌生。大家應(yīng)該都知道css3中有線性漸變和徑向漸變。并且在前面的文章中，我們也已經(jīng)給大家介紹了CSS3實(shí)現(xiàn)線性漸變的效果和CSS3實(shí)現(xiàn)徑向漸變的效果，需要的朋友可以先參考了解。

ebeafbafa201be966730b87dd474bb9.png

推薦參考學(xué)習(xí)：《CSS3教程》

本節(jié)主要再給大家介紹css3實(shí)現(xiàn)重復(fù)線性漸變效果的方法。

重復(fù)線性漸變效果，有的朋友可能聽(tīng)起來(lái)比較陌生，但是在我們?nèi)粘Ｉ钪幸彩浅Ｒ?jiàn)的一種漸變效果。

代碼示例如下：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
 <title>CSS3創(chuàng)建重復(fù)線性漸變效果</title>
 <style type="text/css">
 .container{
 text-align:center;
 padding:20px 0;
 width:960px;
 margin: 0 auto;
 }

 .container div{
 width:200px;
 height:150px;
 display:inline-block;
 margin:2px;
 color:#ec8007;
 vertical-align: top;
 line-height: 230px;
 font-size: 20px;
 }
 .repeating-linear{
 background:repeating-linear-gradient(-45deg, #4b6c9c, #5ac4ed 5px, #fff 5px, #fff 10px);
 }
 </style>
</head>
<body>
<div class="container">
 <div class="repeating-linear">重復(fù)線性漸變</div>
</div>
</body>
</html>

重復(fù)線性效果如下圖：

095d40758ce12c283cb62f4f35f23a9.png

如圖所示，藍(lán)白條間隔的線性漸變效果。從-45 度線性漸變（也就是右下角45度），從#4b6c9c到#5ac4ed以及白色到白色的過(guò)渡重復(fù)漸變。

css3中repeating-linear-gradient() 函數(shù)用于創(chuàng)建重復(fù)的線性漸變 "圖像"。

語(yǔ)法：

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);

be987aec3663be194f80bb3ccbfd247.jpg

注： Internet Explorer 9 及更早版本 IE 瀏覽器不支持漸變。

本篇文章就是關(guān)于CSS3實(shí)現(xiàn)重復(fù)線性漸變效果的方法介紹，非常的簡(jiǎn)單，希望對(duì)需要的朋友有所幫助！

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果

CSS3怎么實(shí)現(xiàn)重復(fù)線性漸變效果:對(duì)于前端學(xué)習(xí)的小伙伴們來(lái)說(shuō)，漸變效果肯定并不陌生。大家應(yīng)該都知道css3中有線性漸變和徑向漸變。并且在前面的文章中，我們也已經(jīng)給大家介紹了CSS3實(shí)現(xiàn)線性漸變的效果和CSS3實(shí)現(xiàn)徑向漸變的效果，需要的朋友可以先參考了解。推薦參考學(xué)習(xí)：《CSS3教程》本節(jié)
推薦度：
標(biāo)簽： 實(shí)現(xiàn) 效果 漸變
  • 熱門(mén)焦點(diǎn)

最新推薦

猜你喜歡

熱門(mén)推薦

專題
Top