html背景色渐变

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

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

< linear-gradient>：使用线性渐变创建背景图像。（CSS3）

< radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3）

< repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3）

< repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3）