先看看效果：
隔四行換色
其他樣式可自行修改。比如隔行加粗，字體變大等。
CSS樣式：
#list1 li:nth-of-type(odd){ background:#00ccff;}奇數(shù)行
#list1 li:nth-of-type(even){ background:#ffcc00;}偶數(shù)行
#list2 li:nth-child(4n+1){ background:#00ccff;}從第一行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用此樣式
#list00000 li:nth-child(4n+2){background:#090;}從第二行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式
#list00000 li:nth-child(4n+3){background:#009;}從第三行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式
#list00000 li:nth-child(4n+4){background:#990;}從第四行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式HTML代碼：
<ul id="list1">
<li>讀書(shū)之樂(lè)樂(lè)無(wú)窮，撥琴一弄來(lái)熏風(fēng)。</li>
<li>書(shū)多筆漸重，睡少枕長(zhǎng)新。——姚合《別賈島》</li>
<li>壞書(shū)是帶有知識(shí)性的毒藥，它會(huì)毒殺精神?！鼱柼?lt;/li>
<li>胸中書(shū)傳有余香?！巍ば翖壖?lt;/li>
<li>靜坐自無(wú)妄為，讀書(shū)即是立德。</li>
<li>要知天下事，須讀古人書(shū)。</li>
<li>凡事豫則立，不豫則廢。</li>
<li>學(xué)而不思則罔，思而不學(xué)則殆。</li>
<li>學(xué)而時(shí)習(xí)之，不亦說(shuō)乎？</li>
<li>君子坦蕩蕩，小人常戚戚。</li>
<li>發(fā)憤忘食，樂(lè)以忘憂，不知老之將至云爾。</li>
<li>巧言亂德，小不忍則亂大謀。</li>
</ul>
<hr />
<ul id="list2">
<li>退筆如山起足珍，讀書(shū)萬(wàn)卷始通神</li>
<li>讀書(shū)如果不明白道理，等于白讀。</li>
<li>從某種意義上說(shuō)沒(méi)有一本書(shū)是壞的正如沒(méi)有一個(gè)女人是丑的。</li>
<li>道不同，不相為謀。</li>
<li>不患寡而患不均，不患貧而患不安。</li>
<li>不義而富且貴，于我如浮云。</li>
<li>不在其位，不謀其政。</li>
<li>名不正，則言不順；言不順，則事不成。</li>
<li>其身正，不令而行；其身不正，雖令不從。</li>
<li>一言而興邦，一言而喪邦。</li>
<li>君子恥其言而過(guò)其行。</li>
<li>不患人之不己知，患不知人也。</li>
</ul> 根據(jù)自己需要選擇相關(guān)樣式即可。
]]>演示效果圖如下：
HTML代碼：根據(jù)你的需要修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>8款純CSS3搜索框</title>
<link rel="stylesheet">
<link rel="stylesheet" href="style.css">
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
background: #494A5F;
font-weight: 500;
font-family: "Microsoft YaHei","宋體","Segoe UI", "Lucida Grande", Helvetica, Arial,sans-serif, FreeSans, Arimo;
}
#container {
width: 500px;
height: 820px;
margin: 0 auto;
}
div.search {padding: 30px 0;}
form {
position: relative;
width: 300px;
margin: 0 auto;
}
input, button {
border: none;
outline: none;
}
input {
width: 100%;
height: 42px;
padding-left: 13px;
}
button {
height: 42px;
width: 42px;
cursor: pointer;
position: absolute;
}
/*搜索框1*/
.bar1 {background: #A3D0C3;}
.bar1 input {
border: 2px solid #7BA7AB;
border-radius: 5px;
background: #F9F0DA;
color: #9E9C9C;
}
.bar1 button {
top: 0;
right: 0;
background: #7BA7AB;
border-radius: 0 5px 5px 0;
}
.bar1 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
/*搜索框2*/
.bar2 {background: #DABB52;}
.bar2 input, .bar2 button {
border-radius: 3px;
}
.bar2 input {
background: #F9F0DA;
}
.bar2 button {
height: 26px;
width: 26px;
top: 8px;
right: 8px;
background: #F15B42;
}
.bar2 button:before {
content: "\f105";
font-family: FontAwesome;
color: #F9F0DA;
font-size: 20px;
font-weight: bold;
}
/*搜索框3*/
.bar3 {background: #F9F0DA;}
.bar3 form {background: #A3D0C3;}
.bar3 input, .bar3 button {
background: transparent;
}
.bar3 button {
top: 0;
right: 0;
}
.bar3 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
/*搜索框4*/
.bar4 {background: #F15B42;}
.bar4 form {
background: #F9F0DA;
border-bottom: 2px solid #BE290E;
}
.bar4 input, .bar4 button {
background: transparent;
}
.bar4 button {
top: 0;
right: 0;
}
.bar4 button:before {
content: "\f178";
font-family: FontAwesome;
font-size: 20px;
color: #be290e;
}
/*搜索框5*/
.bar5 {background: #683B4D;}
.bar5 input, .bar5 button {
background: transparent;
}
.bar5 input {
border: 2px solid #F9F0DA;
}
.bar5 button {
top: 0;
right: 0;
}
.bar5 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
.bar5 input:focus {
border-color: #311c24
}
/*搜索框6*/
.bar6 {background: #F9F0DA;}
.bar6 input {
border: 2px solid #c5464a;
border-radius: 5px;
background: transparent;
top: 0;
right: 0;
}
.bar6 button {
background: #c5464a;
border-radius: 0 5px 5px 0;
width: 60px;
top: 0;
right: 0;
}
.bar6 button:before {
content: "搜索";
font-size: 13px;
color: #F9F0DA;
}
/*搜索框7*/
.bar7 {background: #7BA7AB;}
.bar7 form {
height: 42px;
}
.bar7 input {
width: 250px;
border-radius: 42px;
border: 2px solid #324B4E;
background: #F9F0DA;
transition: .3s linear;
float: right;
}
.bar7 input:focus {
width: 300px;
}
.bar7 button {
background: none;
top: -2px;
right: 0;
}
.bar7 button:before{
content: "\f002";
font-family: FontAwesome;
color: #324b4e;
}
/*搜索框8*/
.bar8 {background: #B46381;}
.bar8 form {
height: 42px;
}
.bar8 input {
width: 0;
padding: 0 42px 0 15px;
border-bottom: 2px solid transparent;
background: transparent;
transition: .3s linear;
position: absolute;
top: 0;
right: 0;
z-index: 2;
}
.bar8 input:focus {
width: 300px;
z-index: 1;
border-bottom: 2px solid #F9F0DA;
}
.bar8 button {
background: #683B4D;
top: 0;
right: 0;
}
.bar8 button:before {
content: "\f002";
font-family: FontAwesome;
font-size: 16px;
color: #F9F0DA;
}
</style>
</head>
<body>
<div id="container">
<div class="search bar1">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar2">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar3">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar4">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar5">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar6">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar7">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
<div class="search bar8">
<form>
<input type="text" placeholder="請(qǐng)輸入您要搜索的內(nèi)容...">
<button type="submit"></button>
</form>
</div>
</div>
</body>
</html>]]>