1.
html:
<
div
class=
"header">
</
div
>
CSS:
.header{
position:
relative;
display: block;
margin: 0 auto;
height: 50px;
padding:
.6rem
0;
width:
100%;
background-image:
-webkit-linear-gradient(left ,
#730cc9,
#ff6ed7);
background-image:
-o-linear-gradient(left ,
#730cc9,
#ff6ed7);
background-image:
linear-gradient(left ,
#730cc9,
#ff6ed7);
}
创建渐变背景图像:
linear-graident: 线性渐变
radial-graident: 径向渐变
repeating-linear-graident: 重复线性渐变
repeating-radial-graident: 重复径向渐变
如:
2.
给input标签设置一个小的搜索icon
如:
Html:
<div class="search_head dbw prt">
<input type="text" class="search_head_text" id="filter" placeholder=""><div class="serch_head_btn">搜索</div>
</div>
css样式:
.prt {position: relative; top: 0; left: 0; }
.dbw {display: block; width: 100%; }
.search_head{
padding: .2rem 0 .15rem;
border-bottom: 1px solid #aeaeae;
background-image: -webkit-linear-gradient(left , #730cc9, #ff6ed7);
background-image: -o-linear-gradient(left , #730cc9, #ff6ed7);
background-image: linear-gradient(left , #730cc9, #ff6ed7);
}
padding: .2rem 0 .15rem;
border-bottom: 1px solid #aeaeae;
background-image: -webkit-linear-gradient(left , #730cc9, #ff6ed7);
background-image: -o-linear-gradient(left , #730cc9, #ff6ed7);
background-image: linear-gradient(left , #730cc9, #ff6ed7);
}
.search_head_text{
display: block;
width: 4rem;
height: .6rem;
padding: 0 .5rem;
border:0;
line-height: .6rem;
font-size: .22rem;
color: #979797;
border-radius: .3rem;
margin: 0 auto;
background:#fff url('/images/merchant/icon_search.png') no-repeat .1rem 0;
background-size: auto 100%;
}
.serch_head_btn{
position: absolute;
top: .3rem;
right: .3rem;
height: .4rem;
line-height: .4rem;
padding: 0 .1rem;
border:1px solid #fff;
border-radius: 3px;
color: #fff;
text-align: center;
font-size: .24rem;
cursor: pointer;
}
display: block;
width: 4rem;
height: .6rem;
padding: 0 .5rem;
border:0;
line-height: .6rem;
font-size: .22rem;
color: #979797;
border-radius: .3rem;
margin: 0 auto;
background:#fff url('/images/merchant/icon_search.png') no-repeat .1rem 0;
background-size: auto 100%;
}
.serch_head_btn{
position: absolute;
top: .3rem;
right: .3rem;
height: .4rem;
line-height: .4rem;
padding: 0 .1rem;
border:1px solid #fff;
border-radius: 3px;
color: #fff;
text-align: center;
font-size: .24rem;
cursor: pointer;
}
< linear-gradient>:使用线性渐变创建背景图像。(CSS3)
< radial-gradient>:使用径向(放射性)渐变创建背景图像。(CSS3)
< repeating-linear-gradient>:使用重复的线性渐变创建背景图像。(CSS3)
< repeating-radial-gradient>:使用重复的径向(放射性)渐变创建背景图像。(CSS3)