用CSS3最佳化HTML5表單的步奏

今天給大家帶來用CSS3來最佳化HTML5表單的方法，首先我們建立一個表單，格式如下。

#redemption {width: 100%;font-family: 'ColaborateThinRegular';font-weight: 400;}#redemption hgroup {argin-bottom: 20px;}#redemption div {width: 100%;margin-bottom: 15px;float: left;}#redemption span#range {float: left;font-size: 3em;width: 100%;color: red;clear: both; text-align: center;}#howYouRateThis,#yearOfCrime {text-align: right;}#redemption legend {font-style: italic;color: #434242;font-size: 0.8em;margin-bottom: 20px;float: left; width: 100%;}#redemption fieldset {border: 1px dotted #cccccc;padding: 2%;margin-bottom: 20px;}#redemption label {width: 40%;float: left;}#redemption input {height: 20px;font-size: 1em;width: 40%;float: right;}#redemption textarea {height: 60px;font-size: 1em;width: 40%;float: right;}#redemption input#submit {text-decoration: none;height: 34px;font: 1.25em /* 36px ÷ 16 */ 'BebasNeueRegular'; background-color: #b01c20;border-radius: 8px;color: white; float: right;margin-bottom: 10px;background: linear-gradient(top, rgb(241,92,96) 0%, rgb(17 100%);margin-top: 10px;box-shadow: 5px 5px 5px hsla(0, 0%, 26.6667%, 0.8);text-shadow: 0px 1px black;border: 1px solid #bfbfbf;.polyfill-important .input-range,.polyfill-important .step-c float: right;}.polyfill-important .step-controls {margin-right: -20px!important;}

唯一需要注意的地方是最後兩個樣式只在相應的補丁指令碼運行時發揮作用。 首先，我想讓每個 fieldset都有一個好看的漸層背景，相互之間稍微空開一點。下面 是針對 fieldset修改後的 CSS代碼：

#redemption fieldset {border: 1px dotted #cccccc;padding: 2%;margin-bottom: 20px;background: #ffffff; background: linear-gradient(top, #ffffff 77%,#f2f2f2 100%);border-radius: 4px;box-shadow: 2px 2px 5px hsla(0, 0%, 16.6667%, 0.3);}

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3關於translate屬性的詳細介紹

CSS3實現旋轉光環效果的實現步驟

CSS3做出圓形風格麵包屑代碼實現步驟