這篇文章主要介紹CSS3怎么制作酷炫的條紋背景，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯致力于互聯網品牌建設與網絡營銷，包括網站制作、成都做網站、SEO優化、網絡推廣、整站優化營銷策劃推廣、電子商務、移動互聯網營銷等。成都創新互聯為不同類型的客戶提供良好的互聯網應用定制及解決方案，成都創新互聯核心團隊10年專注互聯網開發，積累了豐富的網站經驗，為廣大企業客戶提供一站式企業網站建設服務，在網站建設行業內樹立了良好口碑。

1. 實現不等寬背景條紋：

.cont{
width: 500px;
height: 200px;
background: linear-gradient(#78C9DB 70%,#0acf00 0%);
background-size: 100%  20px;
}

如果想設置等寬的漸變只需要將開始值和結束值改為互補

如果你需要等寬切無過渡的漸變，開始和結束值設置為50%即可。

如果你想要垂直條紋，你只需要調整background-size的x、y值即可。

2.瓷磚條紋背景

.cont{
width:500px;
height:200px;
background:linear-gradient(45deg,#78C9DB 50%,#0acf00 50%);
background-size:30px 30px;
}

3. 草地背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 50%,#78C9DB 50%);
background-size:30px 100%;
}

4. 斜條紋背景

.cont{
width:500px;
height:200px;
background:linear-gradient(-45deg,#0acf00 25%,#78C9DB 0,#78C9DB 50%,#0acf00 0,#0acf00 75%,#78C9DB 0);
/*background:repeating-linear-gradient(-45deg,#0acf00,#0acf00 15px,#78C9DB 0,#78C9DB 30px);*/效果相同 
background-size: 30px 30px;
}

5.單色斜條紋背景（利用透明度及transparent）

.cont{
width:500px;
height:200px;
background:#fff repeating-linear-gradient(30deg,rgba(0,0,0,.5),rgba(0,0,0,.5)15px,transparent 0,transparent 30px);
}

6. 格子衫背景

.cont{
width:500px;
height:200px;
background:#fff;
background: linear-gradient(90deg,rgba(100,0,0,.5) 50%,transparent 0),linear-gradient(rgba(100,0,0,.5) 50%,transparent 0);
background-size: 30px 30px;
}

7.波點背景

.cont{
margin:50px;
width:500px;
height:200px;
background:#a95f44;
background-image:radial-gradient(#fff 30%,transparent 0),radial-gradient(#fff 30%,transparent 0);
background-size:20px 20px;
background-position:0 0,10px 10px;  // 必須是background-size尺寸的1/2
}

8.棋盤背景

.cont{
width:500px;
height:200px;
background: #fff;
background-image:linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44  0),
linear-gradient(45deg,#a95f44  26%,transparent 0,transparent 75%,#a95f44 0);
background-size:30px 30px;
background-position:0 0,15px 15px;
}

以上是“CSS3怎么制作酷炫的條紋背景”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！

當前名稱：CSS3怎么制作酷炫的條紋背景
本文網址：http://www.yijiale78.com/article22/jjjhcc.html

成都網站建設公司_創新互聯，為您提供網站改版、虛擬主機、網站設計、網站導航、建站公司、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯