以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

用 CSS3 美化表單分組(fieldset)

2/13 12' icon

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

 

顏色數值可以加上位置,指定漸層顏色的起始點和結束點,如

linear-gradient (left,#000 30%,#FFF 80%);

 

顏色變化可以指定多組,漸層將由第一組顏色,變化到第二組,再變化到第三組....以此類推。

linear-gradient (left,#F00,#0F0,#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:<水平距離> <垂直距離> <模糊程度> <陰影顏色>;

距離正值,代表向右、向下;負值代表向左向上。

box-shadow:6px 20px 6px #000;
box-shadow:-6px -6px 6px #000;
box-shadow:0px 0px 16px #000;
fieldset {
	box-shadow:3px 3px 10px #666;
	}
legend {
	box-shadow:2px 2px 4px #666;
	}
分類標題

連絡方式

附註

修正 legend

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

fieldset shadow

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

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

 

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

楊文琳   2016/4/10 下午 06:44:00

謝謝 很有幫助

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: