【卜維丰】用 CSS3 美化表單分組(fieldset)

     



以下為本頁本文內容


用 CSS3 美化表單分組(fieldset)


fieldset / legend 不僅僅是成組的標籤，同時也是美化表單中重要的標籤，Firefox 甚至把 fieldset 當作是表單元件之一。

基本語法

view source

<fieldset>
<legend>分类标题</legend>
</fieldset>


分類標題

連絡方式by Telby eMail

附註


加個顏色

view source

fieldset{
        border:0;
        padding:10px;
        margin-bottom:10px;
        background:#eee;
        }
        legend{
             padding:5px 10px;
             background-color:#4F709F;
              padding:5px 10px;}



分類標題

連絡方式by Telby eMail

附註


加個圓角

圓角的語法為

border-radius:<圓角半徑>;

新版 Firefox 以及 Google Chrome 都已經正式支援圓角屬性，所以可以不用再撰寫成

-moz-border-radius:<圓角半徑>;
-webkit-border-radius:<圓角半徑>;

view source

print?

1fieldset {
2    border-radius: 8px;
3    }
4legend {
5    border-radius:3px;
6    }

分類標題

連絡方式by Telby eMail

附註


背景用漸層

漸層的語法為(以直線漸層為例)

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 (...);

view source

print?

1fieldset {
2    background:-webkit-linear-gradient(top,#EEE,#FFF);
3    background:-moz-linear-gradient(top,#EEE,#FFF);
4    }

分類標題

連絡方式by Telby eMail

附註


加上陰影

陰影的語法為

box-shadow:<水平距離> <垂直距離> <模糊程度> <陰影顏色>;

距離正值，代表向右、向下；負值代表向左向上。

box-shadow:6px 20px 6px #000;

box-shadow:-6px -6px 6px #000;

box-shadow:0px 0px 16px #000;

view source

print?

1fieldset {
2    box-shadow:3px 3px 10px #666;
3    }
4legend {
5    box-shadow:2px 2px 4px #666;
6    }

分類標題

連絡方式by Telby eMail

附註


修正 legend

部份瀏覽器，對 fieldset 的整體高度(或說整個物件)，是包含 legend 標籤高度，這個情況，一般不會有任何影響，但是當為 fieldset 加上陰影後，可能就會變成

fieldset shadow

如果再加上底色不是白色，就會更明顯，如上圖，因此進行局部小修正。

view source

print?

1fieldset {position:relative;}
2legend {position:absolute;left:10px;top:-11px;}

分類標題

連絡方式by Telby eMail

附註


完整 CSS

view source

print?

01fieldset {
02    border:0;
03    padding:10px;
04    margin-bottom:
05    10px;background:#EEE;
06 
07    border-radius: 8px;
08    -moz-border-radius: 8px;
09    -webkit-border-radius: 8px;
10 
11    background:-webkit-liner-gradient(top,#EEEEEE,#FFFFFF);
12    background:linear-gradient(top,#EFEFEF,#FFFFFF);
13 
14    box-shadow:3px 3px 10px #666;
15    -moz-box-shadow:3px 3px 10px #666;
16    -webkit-box-shadow:3px 3px 10px #666;
17 
18    position:relative;
19    }
20 
21legend {
22    padding:5px 10px;
23    background-color:#4F709F;
24    color:#FFF;
25 
26    border-radius:3px;
27    -moz-border-radius:3px;
28    -webkit-border-radius:3px;
29 
30    box-shadow:2px 2px 4px #666;
31    -moz-box-shadow:2px 2px 4px #666;
32    -webkit-box-shadow:2px 2px 4px #666;
33 
34    position:absolute;
35    left:10px;top:-11px;
36    }