邊框
和邊框相關的屬性如下。
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;}
