CSS3：元素的邊框、背景和大小

邊框

和邊框相關的屬性例如以下。

border-width

用于設定邊框的寬度，可選擇包含：

1）<長度值>：将邊框寬度設為以CSS度量機關（如em、px、cm）表達的長度值。

2）<百分數>：将邊框寬度值設為邊框繪制區域的寬度的百分數；

3）thin、medium和thick：将邊框寬度設為預設寬度。這三個值的詳細意義是由浏覽器定義，三個值代表的寬度一次增大，邊框寬度的預設值是medium。

border-style

用于設定繪制邊框使用的樣式。能夠是下列值的随意一個。

1）none：沒有邊框。預設值；

2）dashed：破折線式邊框；

3）dotted：圓點線式邊框；

4）groove：槽線式邊框；

5）inset：使元素内容具有内嵌效果的邊框；

6）outset：使元素内容具有外凸效果的邊框；

7）ridge：脊線邊框；

8）solid：實線邊框。

border-color

設定邊框的顔色。

為特定邊設定邊框樣式

頂邊

border-top-width

border-top-style

border-top-color

底邊

border-bottom-width

border-bottom-style

border-bottom-color

左邊

border-left-width

border-left-style

border-left-color

右邊

border-right-width

border-right-style

border-right-color

簡寫方式

border: <寬度> <樣式> <顔色>

border-top: <寬度> <樣式> <顔色>

border-bottom: <寬度> <樣式> <顔色>

border-left: <寬度> <樣式> <顔色>

border-right: <寬度> <樣式> <顔色>

圓角邊框

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

設定一個圓角。一對長度值或百分數值，百分數跟邊框盒子的寬度和高度相關。

border-radius

一次設定四個角。一對或四隊長度值或百分數值，由/字元切割。

p {
	border: medium solid black;
}
#first {
	border-radius: 20px / 15px;
}
#second {
	border-radius: 50% 20px 25% 5em / 25% 15px 40px 55%
}
           

背景

背景顔色和圖像

能夠為元素的背景設定顔色、圖像、大小和平鋪方式。例如以下：

p {
	border: medium solid black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: repeat-x;
}
           

background-repeat支援例如以下屬性值：

1）repeat-x：水準方向平鋪圖像。圖像可能被截斷；

2）repeat-y：垂直方向平鋪圖像，圖像可能被截斷。

3）repeat：水準和垂直方向同一時候平鋪圖像，圖像可能被截斷。

4）space：水準或者垂直方向平鋪圖像，但在圖像與圖像之間設定統一間距。確定圖像不被截斷；

5）round：水準或者垂直方向平鋪圖像，但調整圖像大小，確定圖像不被截斷。

6）no-repeat：禁止平鋪圖像。

background-size支援例如以下屬性值：

1）contain：等比例縮放圖像，使其寬度、高度中較大者與容器橫向或縱向重合，背景圖像始終包含在容器内；

2）cover：等比例縮放圖像，使圖像至少覆寫容器，有可能超出容器；

3）auto：預設值，圖像以本身尺寸全然顯示。

設定背景圖像位置

background-position屬性設定背景圖像的位置。

p {
	border: 10px double black;
	background-color: lightgray;
	background-image: url(banana.png);
	background-size: 40px 40px;
	background-repeat: no-repeat;
	background-position: 30px 10px;
}
           

background-position屬性的值包含：

1）top：将背景圖像定位到盒子頂部邊界。

2）left：将背景圖像定位到盒子左邊界；

3）right：将背景圖像定位到盒子右邊界；

4）bottom：将背景圖像定位到盒子底部邊界；

5）center：将背景圖像定位到中間位置。

元素背景的附着方式

當元素具有卷軸框時。使用background-attachment屬性能夠控制背景的附着方式。支援的屬性值包含：

1）fixed：背景固定到視窗上，即内容滾動時背景不動；

2）local：背景附着到内容上。即背景随内容一起滾動。

3）scroll：背景固定到元素上，不會随内容一起滾動。

背景圖像的開始位置和裁剪樣式

background-origin屬性指定背景顔色和背景圖像應用的位置。支援的屬性值包含：

1）border-box：在邊框盒子内部繪制背景顔色和背景圖像；

2）padding-box：在内邊距盒子内部繪制背景顔色和背景圖像。

3）content-box：在内容盒子内部繪制背景顔色和背景圖像。

background-clip屬性決定了背景的哪一部分是可見的，裁剪盒子之外的部分一律被丢棄，不會顯示。

支援的屬性值同上。

簡寫方式

能夠使用background簡寫屬性在一條聲明中設定全部的背景值：

background: <background-color> <background-position> <background-size> <background-repeat> <background-orgin> <background-clip> <background-attachment> <background-image>

陰影

使用box-shadow屬性能夠為元素的盒子加入陰影效果。支援的屬性值例如以下：

1）hoffset：陰影的水準偏移量，是一個長度值，正值代表陰影向右偏移。負值代表陰影向左偏移；

2）voffset：陰影的垂直偏移量，是一個長度值，正值代表陰影位于元素盒子下方，負值代表陰影位于元素盒子上方；

3）blur：（可選）模糊值，是一個長度值，值越大盒子的邊界越模糊。預設值0，邊界清晰；

4）spread：（可選）陰影的延伸半徑，是一個長度值，正值代表陰影向盒子各個方向延伸擴大，負值代表陰影沿相反方向縮小。

5）color：（可選）設定陰影的顔色，假設省略，浏覽器會自行選擇一個顔色；

6）inset：（可選）将外部陰影設定為内部陰影（内嵌到盒子中）。

能夠一次設定多個陰影，使用逗号分隔：

p {
	border: 10px double black;
	box-shadow: 5px 4px 10px 2px gray, 4px 4px 6px gray inset;
}
           

輪廓

輪廓是可選的，輪廓的用處是在短時間内抓住使用者對某個元素的注意力，輪廓繪制在盒子邊框的外面，邊框和輪廓的最大的差别是：輪廓不屬于頁面，是以應用輪廓不須要調整頁面布局。輪廓的屬性包含：

1）outline-color：設定外圍輪廓的顔色；

2）outline-offset：長度值，設定輪廓距離元素邊框邊緣的偏移量。

3）outline-style：設定輪廓樣式，同border-style的值；

4）outline-width：設定輪廓的寬度。包含：thin、medium、thick和長度值；

5）ouline：在一條生命中設定輪廓的全部屬性（<顔色> <樣式> <寬度>）。

元素的邊距

元素的内邊距

元素的内邊距是元素内容和邊框之間的空白。内邊距有例如以下屬性，值都為長度值或者百分數：

1）padding-top：為頂邊設定内邊距；

2）padding-right：為右邊設定内邊距。

3）padding-bottom：為底邊設定内邊距；

4）padding-left：為左邊設定内邊距。

5）padding：簡寫屬性，同一時候設定全部邊的内邊距。

p {
	border: 10px solid black;
	background: lightgray;
	border-radius: 1em 4em 1em 4em;
	padding: 5px 25px 5px 40px;
}
           

元素的外邊距

元素的外邊距是元素邊框和頁面上環繞在它周圍的全部東西之間的空白區域。外邊距有例如以下屬性，值都為長度值或者百分數：

1）margin-top：為頂邊設定外邊距。

2）margin-right：為右邊設定外邊距；

3）margin-bottom：為底邊設定外邊距；

4）margin-left：為左邊設定外邊距。

5）margin：簡寫屬性。在一條聲明中設定全部邊的外邊距。

img {
	border: 4px solid black;
	background: lightgray;
	padding: 4px;
	margin: 4px 20px;
}
           

元素的大小

CSS提供了控制元素尺寸的屬性。這些屬性能夠使用的值為auto、長度值或者百分數。auto表示讓浏覽器設定元素的寬度和高度。

設定區域

box-sizing屬性指定尺寸樣式應用到元素盒子的詳細區域。取值包含：

1）content-box：尺寸設定僅應用到内容區域；

2）pading-box：尺寸設定應用到pading區域。

3）border-box：尺寸設定應用到border區域。

4）margin-box：尺寸設定應用到margin區域。

最小和最大尺寸

min-width和max_width屬性為浏覽器調整尺寸設定一定的限制。

img {
	background: lightgray;
	border: 4px solid black;
	margin: 2px;
	box-sizing: border-box;
	min-width: 100px;
	width: 50%;
	max_width: 200px;
}
           

内容溢出

假設元素的尺寸過大，無法全然顯示在元素的内容盒中，眼下有3個屬性用于控制内部溢出部分的處理方式：

1）overflow-x：設定水準方向的溢出方式；

2）overflow-y：設定垂直方向的溢出方式；

3）overflow：同一時候設定水準方向和垂直方向的溢出方式。

3個屬性支援的屬性值例如以下：

1）auto：浏覽器自行處理溢出内容。

2）hidden：多餘的部分直接剪掉，僅僅顯示内容盒裡面的内容。

3）no-content：假設内容無法全部顯示，就直接移除，大部分浏覽器都不支援；

4）no-display：假設内容無法全部顯示。就隐藏全部内容，大部分浏覽器都不支援；

5）scroll：為内容加入卷軸框，即使内容沒有溢出也能看到卷軸框；

6）visible：預設值，無論是否溢出内容盒。都顯示元素效果。

p {
	width: 200px;
	height: 100px;
	border: medium double black;
}
#first {overflow: hidden;}
#second {overflow: scroll;}
           

元素的可見性

使用visibility屬性能夠控制元素的可見性。支援的屬性值例如以下：

1）collapse：元素不可見，且在頁面布局中不占領空間；

2）hidden：元素不可見，但在頁面布局中占領空間。

3）visible：預設值，可見。

元素的盒類型

display屬性提供了一種改變元素盒類型的方式，這會改變元素在頁面上的布局方式。該屬性的經常使用值例如以下，不包含彈性盒子、表格和ruby凝視相關的屬性：

1）inline：盒子顯示為文本行中的字；

2）block：盒子顯示為段落。

3）inline-block：盒子顯示為文本行；

4）list-item：盒子顯示為清單項；

5）run-in：盒子類型取決于周圍的元素。

6）none：元素不可見，且在頁面布局中不占空間。

浮動

float屬性設定元素的浮動樣式，可選擇包含：

1）left：移動元素，使其左邊界挨着包含塊的左邊界，或者還有一個浮動元素的右邊界；

2）right：移動元素，使其右邊界挨着包含塊的右邊界。或者還有一個浮動元素的左邊界；

3）none：元素位置固定。

p.toggle{
	float: left;
	border: medium double black;
	width: 40%;
	margin: 2px;
	padding: 2px;
}