怎麼用css樣式製作好看的表單樣式？（程式碼範例）

本篇文章主要介紹了css表單樣式的精美製作代碼方法。一個好看的表單樣式，對於網站整體效果來說 是至關重要的，不僅便於使用者閱覽，也適合站長管理網站。

精美form表單css樣式代碼具體樣本如下：

form代碼：

<form class="form">    <p class="name">      <input type="text" name="name" id="name" />      <label for="name">Name<span>圖</span><i>庫</i></label>    </p>    <p class="email">      <input type="text" name="email" id="email" />      <label for="email">E-mail<span>圖</span><i>庫</i></label>    </p>    <p class="web">      <input type="text" name="web" id="web" />      <label for="web">Website<span>圖</span><i>庫</i></label>    </p>    <p class="text">      <textarea name="text"></textarea>    </p>    <p class="submit">      <input type="submit" value="Send" />    </p>  </form>

css樣式代碼：

input, textarea {     padding: 9px;    border: solid 1px #E5E5E5;    outline: 0;    font: normal 13px/100% Verdana, Tahoma, sans-serif;    width: 200px;    background: #FFFFFF url('bg_form.png') left top repeat-x;    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;    }     textarea {     width: 400px;    max-width: 400px;    height: 150px;    line-height: 150%;    }     input:hover, textarea:hover,   input:focus, textarea:focus {     border-color: #C9C9C9;     -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;    }     .form label {     margin-left: 10px;     color: #999999;     }     .submit input {    width: auto;    padding: 9px 15px;    background: #617798;    border: 0;    font-size: 14px;    color: #FFFFFF;    -moz-border-radius: 5px;    -webkit-border-radius: 5px;    }

效果如：

註：

box-shadow 屬性向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。可使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！

可能的值：

h-shadow 必需。水平陰影的位置。允許負值。

v-shadow 必需。垂直陰影的位置。允許負值。

blur 可選。模糊距離。

spread 可選。陰影的尺寸。

color 可選。陰影的顏色。

inset 可選。將外部陰影 (outset) 改為內部陰影