Css3 模糊、背景裁切、线性渐变属性、控制placeholder的样式

img{
   filter:blur(10px);模糊10个像素
}
background-clip:（背景裁切）
1.border-box;默认
2.padding-box;
3.content-box;内容
盒模型：
border：边框区域；
padding:内填充;
content:内容区；
background:linear-gradient();线性渐变
background:linear-gradient(
to top,/*--从下到上、to bottom 从上到下(默认) to left 右到左 to 
tight8、
red 20%,green 70%,blue 90%
);
background:linear-gradient(
     red 20%,
     green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
     green 90%,
     black 51%
);
接下来：
background:linear-gradient(
     tansparent 49%,红色这里改成透明 红色占49%
     green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
     green 51%,中间绿色就只占2%（51-49）
     transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51% 
)<style type="text/css">
/*css3控制placeholder的样式*/
.input{
outline: none;
height: 30px;
border: none;
border-bottom: 2px solid #000;
transition:.8s;
}
.input:focus{/*当鼠标点击加底部横线*/
border-bottom-color: black;
}
.input:focus::-webkit-input-placeholder{
transition:0.5s;
}
.input:focus::-webkit-input-placeholder{
color: black;
transform:scale(0.6) translateY(-3px);
transform-origin:left top;
/*鼠标点击提示字缩小并且文字往上位移3个距离靠左上角*/
}
</style>
<tr>
<td class="td_left">姓名:</td>
<td><input type="text" class="input" placeholder="请输入名字"/></td>
</tr>
input 的id可以和label的for相互绑定：
<input type="checkbox" name="food" id="shucai"/>
<label for="shucai"></label> 熟菜