現在我們的表單現在我們的表單實現了跨瀏覽器一致的功能表現，同時也有一些基本樣式。你我都知道，使用 CSS3可以讓表單的樣式更美觀。目前我們的表單樣式如下：

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

}

除了圓角和背景漸變效果，我們唯一需要做的就是再加一點點陰影（box-shadow）效果。 此處省略了各種 CSS3聲明的瀏覽器私有前綴。

在整個示例代碼中，你可以看到我混用了各種顏色值。有時是 red 這樣的顏色名稱，有時是十六進制、RBG 或 HSL。在支持這些顏色模式的瀏覽器中這樣做沒什么問題。但在實際生產環境中，為保持一致性和兼容性，你應該只選用一兩種顏色模式。

CSS3不僅能輕松地追加樣式，而且也能有效阻止在不需要的元素上追加樣式。

文主要講解移動端頁面上能上傳多個本地圖片的例子，在一些發布說說的頁面上能用得到，有興趣的小伙伴可以一起看看！

效果圖：

html:

css:

css樣式方面就不多說了，自己可以美化自己的布局，重點還是js中的實現代碼：如下