制作表單（第一期筆記）：美化表單常用的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;