以下為本站文章分類清單
- AJAX
- ASP
- CSS
- Javascript
- Windows 應用程式
- 網頁設計
- 評論、短文、雜文
- 版主
- 最新回應
以下為本頁本文內容
用 CSS3 美化表單分組(fieldset)
2/13 12' 
fieldset / legend 不僅僅是成組的標籤，同時也是美化表單中重要的標籤，Firefox 甚至把 fieldset 當作是表單元件之一。
基本語法
加個顏色
fieldset {
border:0;
padding:10px;
margin-bottom:10px;
background:#EEE;
}
legend {
padding:5px 10px;
background-color:#4F709F;
color:#FFF;
}
加個圓角
圓角的語法為
border-radius:<圓角半徑>;
新版 Firefox 以及 Google Chrome 都已經正式支援圓角屬性，所以可以不用再撰寫成
-moz-border-radius:<圓角半徑>;
-webkit-border-radius:<圓角半徑>;
fieldset {
border-radius: 8px;
}
legend {
border-radius:3px;
}
背景用漸層
漸層的語法為(以直線漸層為例)
linear-gradient (<起始位置>,<起點顏色> <位置>,[<顏色> <位置>]<終點顏色> <位置>);
用實際數值來看比較楚\
linear-gradient (left,#000,#FFF);
- left : 指由左側開始，線性漸層，只要指出起始點位置即可，top left 代表左上角，也就是漸層會變成斜的。
- #000 : 指漸層起始的顏色。
- #FFF : 指漸層結束的顏色。
顏色數值可以加上位置，指定漸層顏色的起始點和結束點，如
linear-gradient (left,#000 30%,#FFF 80%);
- left : 代表漸層由左至右。
- #000 30% : 代表由左側向右算起 0%-30% 均為 #000，由 30% 開始往右漸層至指定的結束顏色。
- #FFF 80% : 這裡指定在結束點，代表由左側往右計算，80%-100% 顏色均為 #FFF。
顏色變化可以指定多組，漸層將由第一組顏色，變化到第二組，再變化到第三組....以此類推。
linear-gradient (left,#F00,#0F0,#00F);
- left : 代表漸層由左至右。
- #F00 : 第一組顏色，#F00 代表紅色。
- #0F0 : 第二組顏色，#0F0 代表綠色。
- #00F : 第三組顏色，#00F 代表藍色。
iosart labs 提供了線上漸層語法產生器，按這裡查看。
漸層屬性，尚未完全支援，Firefox 以及 Google Chrome 請分別加上各自獨特屬性的起啟字元，Firefox 為 -moz，Google Chrome 為 -webkit，如
-moz-linear-gradient (...};
-webkit-linear-gradient (...);
fieldset {
background:-webkit-linear-gradient(top,#EEE,#FFF);
background:-moz-linear-gradient(top,#EEE,#FFF);
}
加上陰影
陰影的語法為
box-shadow:<水平距離> <垂直距離> <模糊程度> <陰影顏色>;
距離正值，代表向右、向下；負值代表向左向上。
fieldset {
box-shadow:3px 3px 10px #666;
}
legend {
box-shadow:2px 2px 4px #666;
}
修正 legend
部份瀏覽器，對 fieldset 的整體高度(或說整個物件)，是包含 legend 標籤高度，這個情況，一般不會有任何影響，但是當為 fieldset 加上陰影後，可能就會變成
如果再加上底色不是白色，就會更明顯，如上圖，因此進行局部小修正。
fieldset {position:relative;}
legend {position:absolute;left:10px;top:-11px;}
完整 CSS
fieldset {
border:0;
padding:10px;
margin-bottom:
10px;background:#EEE;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background:-webkit-liner-gradient(top,#EEEEEE,#FFFFFF);
background:linear-gradient(top,#EFEFEF,#FFFFFF);
box-shadow:3px 3px 10px #666;
-moz-box-shadow:3px 3px 10px #666;
-webkit-box-shadow:3px 3px 10px #666;
position:relative;
}
legend {
padding:5px 10px;
background-color:#4F709F;
color:#FFF;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
box-shadow:2px 2px 4px #666;
-moz-box-shadow:2px 2px 4px #666;
-webkit-box-shadow:2px 2px 4px #666;
position:absolute;
left:10px;top:-11px;
}
以下為文章回應區
同意轉載，不過麻煩看一下轉載需知