小編給大家分享一下怎么使用CSS3美化HTML5表單，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注服務(wù)器托管服務(wù)十載，提供服務(wù)器租用、網(wǎng)站空間、主機(jī)域名、云服務(wù)器、云主機(jī)租用、溫江服務(wù)器托管、建站等服務(wù)

目前表單格式如下：

#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;

}

唯一需要注意的地方是最后兩個(gè)樣式只在相應(yīng)的補(bǔ)丁腳本運(yùn)行時(shí)發(fā)揮作用。 首先，我想讓每個(gè) fieldset都有一個(gè)好看的漸變背景，相互之間稍微空開一點(diǎn)。下面 是針對(duì) 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);

}

以上是“怎么使用CSS3美化HTML5表單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！