CSS(三)：基本屬性二，css基本屬性

CSS(三)：基本屬性二，css基本屬性

• border-width
• border-color
• border-style

border-width 簡寫屬性為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。

只有當邊框樣式不是 none 時才起作用。如果邊框樣式是 none，邊框寬度實際上會重設為 0。不允許指定負長度值。

border-color 屬性設定四條邊框的顏色。此屬性可設定 1 到 4 種顏色。

border-color 屬性是一個簡寫屬性，可設定一個元素的所有邊框中可見部分的顏色，或者為 4 個邊分別設定不同的顏色。

border-style 屬性用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。

只有當這個值不是 none 時邊框才可能出現。

 1 /* 設定5px的灰色實線邊框 */ 2 p{ 3     border-width: 5px 5px 5px 5px; 4     border-color: #ccc; 5     border-style: solid; 6 } 7  8 <p>border-width: 5px 5px 5px 5px; 9     border-color: #ccc;10     border-style: solid;</p>

• border

border 簡寫屬性在一個聲明設定所有的邊框屬性。

可以按順序設定如下屬性：

• border-width
• border-style
• border-color

如果不設定其中的某個值，也不會出問題，比如 border:solid #ff0000; 也是允許的。

1 /* 設定5px的灰色實線邊框 */2 p{3     border: 5px solid #ccc;4 }5 6 <p>border: 5px solid #ccc</p>

• border-radius

border-radius 屬性是一個最多可指定四個 border -*- radius 屬性的複合屬性。

• 文法

border-radius:  1-4 length| % /  1-4 length| %;

注意: 每個半徑的四個值的順序是：左上方，右上方，右下角，左下角。如果省略左下角，右上方是相同的。如果省略右下角，左上方是相同的。如果省略右上方，左上方是相同的。

1 /* 設定各半徑為5px的圓角 */2 p{3     border-radius: 5px;4 }5 6 <p>border-radius: 5px</p>

• border-image

border-image 屬性是一個簡寫屬性，用於設定以下屬性：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

如果省略值，會設定其預設值。

1 /* 設定映像邊框 */2 p{3     border-image: url(button.png) 0 14 0 14 stretch;4 }5 6 <p>border-image: url(button.png) 0 14 0 14 stretch</p>

• box-shadow

box-shadow 屬性向邊框添加一個或多個陰影。

• 文法

box-shadow: h-shadow v-shadow blur spread color inset;

注釋：box-shadow 向框添加一個或多個陰影。該屬性是由逗號分隔的陰影列表，每個陰影由 2-4 個長度值、可選的顏色值以及可選的 inset 關鍵詞來規定。省略長度的值是 0。

1 /* 設定向下右位移5px的黑色陰影 */2 p{3     box-shadow: 5px 5px 10px #000;4 }5 6 <p>box-shadow: 5px 5px 10px #000</p>

• line-height

line-height 屬性設定行間的距離（行高）。

注釋：不允許使用負值。

• 說明

該屬性會影響行框的布局。在應用到一個區塊層級元素時，它定義了該元素中基準之間的最小距離而不是最大距離。

line-height 與 font-size 的計算值之差（在 CSS 中成為“行間距”）分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。

原始數字值指定了一個縮放因子，後代元素會繼承這個縮放因子而不是計算值。

1 /* 設定20px的行高 */2 p{3     line-height: 20px;4 }5 6 <p>line-height: 20px</p>

• text-indent

text-indent 屬性規定文字區塊中首行文本的縮排。允許使用負值。如果使用負值，那麼首行會被縮排到左邊。

1 /* 設定兩字元寬的縮排 */2 p{3     text-indent: 2em;4 }5 6 <p>text-indent: 2em</p>

• text-align

text-align 屬性規定元素中的文本的水平對齊。

該屬性通過指定行框與哪個點對齊，從而設定區塊層級元素內文本的水平對齊。通過允許使用者代理程式調整行內容中字母和字之間的間隔，可以支援值 justify；不同使用者代理程式可能會得到不同的結果。

1 /* 設定文字靠左對齊 */2 p{3     text-align: left;4 }5 6 <p>text-align: left</p>

• letter-spacing 

letter-spacing 屬性增加或減少字元間的空白（字元間距）。

該屬性定義了在文本字元框之間插入多少空間。由於字元字形通常比其字元框要窄，指定長度值時，會調整字母之間通常的間隔。因此，normal 就相當於值為 0。

1 /* 設定5px的字元間隔 */2 p{3     letter-spacing: 5px;4 }5 6 <p>letter-spacing: 5px</p>

• text-overflow  

控制文字內容溢出部分的樣式。

text-overflow只是用來解說文字溢出時用什麼方式顯示，要實現溢出時產生省略符號的效果，還須定義強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden），只有這樣才能實現溢出文本顯示省略符號的效果。

1 /* 設定當字元超出容器寬度時顯示為省略符號 */2 p{3     overflow: hidden;    4     white-space: nowrap;5     text-overflow: ellipsis;6 }7 8 <p>overflow: hidden;white-space: nowrap;text-overflow: ellipsis;</p>

• word-wrap

控制內容超過容器的邊界時是否斷行。值為normal時允許內容頂開或溢出指定的容器邊界。值為break-word時內容將在邊界內換行。如果需要，單詞內部允許斷行。

1 /* 設定自動換行 */2 p{3     word-wrap: break-word;4 }5 6 <p>word-wrap: break-word</p>

• background-color

background-color 屬性設定元素的背景顏色。

元素背景的範圍

background-color 屬性為元素設定一種純色。這種顏色會填充元素的內容、內邊距和邊框地區，擴充到元素邊框的外邊界（但不包括外邊距）。如果邊框有透明部分（如虛線邊框），會透過這些透明部分顯示出背景色。

1 /* 設定背景色為灰色 */2 p{3     background-color: #ccc;4 }5 6 <p>background-color: #ccc</p>

• background-image

background-image 屬性為元素設定背景映像。

元素的背景佔據了元素的全部尺寸，包括內邊距和邊框，但不包括外邊距。

預設地，背景映像位於元素的左上方，並在水平和垂直方向上重複。

1 /* 設定背景圖片 */2 p{3     background-image: url(bgimage.jpg);4 }5 6 <p>background-image: url(bgimage.jpg)</p>

• background-repeat

設定如何平鋪對象的 background-image 屬性。

預設情況下，重複background-image的垂直和水平方向。

1 /* 設定x軸重複背景圖片 */2 p{3     background-image: url(bgimage.jpg);4     background-repeat: repeat-x;5 }6 7 <p>background-image: url(bgimage.jpg);background-repeat: repeat-x</p>

• background-position

background-position 屬性設定背景映像的起始位置。

這個屬性設定背景原映像（由 background-image 定義）的位置，背景映像如果要重複，將從這一點開始。

1 /* 設定背景圖片起始位置為左上方 */2 p{3     background-image: url(bgimage.jpg);4     background-position: left top;5 }6 7 <p>background-image: url(bgimage.jpg);background-position: left top</p>

• background

background 簡寫屬性在一個聲明中設定所有的背景屬性。

可以設定如下屬性：

• background-color
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
• background-image

如果不設定其中的某個值，也不會出問題，比如 background:#ff0000 url('smiley.gif'); 也是允許的。

通常建議使用這個屬性，而不是分別使用單個屬性，因為這個屬性在較老的瀏覽器中能夠得到更好的支援，而且需要鍵入的字母也更少。

1 /* 簡寫設定背景圖片 */2 p{3     background:url(bgimage.jpg) no-repeat left top;4 }5 6 <p>background:url(bgimage.jpg) no-repeat left top</p>