制作表单（第一期笔记）：美化表单常用的css样式

清除输入框样式

不管三七二十一，想要自己设计输入框样式，我们第一步需要清除input自带样式

input{
-webkit-appearance: none;
-moz-appearance: none;
appearance:none ;
outline: 0;
}

利用padding减轻视觉负担

最好给输入框设置一下左右边距，不会显得输入文字过于拥挤

添加padding:0 8px;之后的样式，显得大气很多

锦上添花的阴影border-shadow和border-radius

利用border-radius设计输入框会让表单顿时高大上起来，圆润的东西总是给人柔和的印象

阴影在在聚焦状态和反馈状态经常用到，添加阴影过后质感也会变得不一样

栗子中聚焦用到的阴影样式：

input:focus{
box-shadow:0 0 5px 2px rgba(0,0,0,0.3);
}

语法：

box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：必需，水平阴影位置，允许负值

v-shadow：必需，垂直阴影位置，允许负值

blur：可选，模糊距离

spread：可选，阴影尺寸

color：可选，阴影颜色

inset：可选，将外部阴影（outset）改为内部阴影

半透明的输入框

虽然说利用 background-color: transparent; 可以制作透明背景色，但是在输入框中一般不使用，全透明了有点没意思，所以一般会利用 background: rgba(); 来设计一些半透明的输入框，这种时候通常会搭配一些稍微丰富一点的背景色

 .form_body .input_s input{
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance:none ;
        text-align: center;
        height: 36px;
        width: 248px;
        border-radius: 15px;
        border: 0px solid #fff;
        padding:0 8px;
        outline: 0;
        letter-spacing: 1px;
        color:#fff;
        font-weight: 600;
        background: rgba(45,45,45,.10);/*半透明背景色*/
        border: 1px solid rgba(255,255,255,.15);
        box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
        text-shadow: 0 1px 2px rgba(0,0,0,.1);
        -o-transition: all .2s;
        -moz-transition: all .2s;
        -webkit-transition: all .2s;
        -ms-transition: all .2s;
    }
    .form_body .input_s input:focus{
         box-shadow:0 0 5px 4px rgba(0, 0, 0,0.1);
    }

输入框placeholder提示文字的颜色修改

  input::-webkit-input-placeholder{ /*WebKit browsers*/
        color: rgba(255,255,255,0.8);
    }

    input::-moz-input-placeholder{ /*Mozilla Firefox*/
        color: rgba(255,255,255,0.8);
    }

    input::-ms-input-placeholder{ /*Internet Explorer*/ 
        color: rgba(255,255,255,0.8);
  }

内阴影制作渐变按钮

 

box-shadow: 0 0 35px 15px rgba(29,43,100,0.9) inset;