這篇文章將為大家詳細(xì)講解有關(guān)“如何使用CSS3寫多種效果的條紋背景，代碼是什么”的知識(shí)，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

1. 實(shí)現(xiàn)不等寬背景條紋：

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

如果想設(shè)置等寬的漸變只需要將開始值和結(jié)束值改為互補(bǔ)

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

如果你想要垂直條紋，你只需要調(diào)整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.波點(diǎn)背景

.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;
}

總結(jié)

這篇關(guān)于“如何使用CSS3寫多種效果的條紋背景，代碼是什么”的文章就介紹到這了,更多相關(guān)的內(nèi)容，歡迎關(guān)注群英網(wǎng)絡(luò)，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• CSS中實(shí)現(xiàn)空心三角箭頭的方法是什么

  頁面中空心三角箭頭效果怎樣實(shí)現(xiàn)？在實(shí)際項(xiàng)目的操作過程或是學(xué)習(xí)過程中，不少人都會(huì)遇到這樣的問題，接下來就讓小編帶大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

• CSS3中將footer始終固定在底部的代碼是什么

  這篇文章主要介紹了CSS3 實(shí)現(xiàn)footer 固定在底部(無論頁面多高始終在底部)的相關(guān)資料,需要的朋友可以參考下

• CSS3過渡效果的實(shí)現(xiàn)使用什么方法呢

  小編主要為大家詳細(xì)介紹下如何利用CSS3做一些過渡效果的內(nèi)容，用CSS3做一些過渡效果和動(dòng)畫，特別適合Web前端開發(fā)員學(xué)，有需要的朋友可以參考了解看看，那么接下來就跟隨小編的思路來往下學(xué)習(xí)吧。

• HTML5 meta標(biāo)簽要素包括幾種，用法是怎樣的

  本篇文章主要的為大家講述的是關(guān)于html meta標(biāo)簽的三要素，就是三屬性的組成和使用的介紹，里面有很多比較重要的屬性值，在網(wǎng)頁中都是很有用的，現(xiàn)在讓我們一起來看這篇文章吧

• CSS里面device-width的使用與width一樣嗎

  這篇文章主要介紹了css3媒體查詢中device-width和width的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧