背景與邊框
背景與邊框
使用CSS背景和邊框來做一些，具有一些創造性的事情。漸變、背景影象和圓角，背景和邊框的巧妙運用是CSS中許多樣式問題的答案。
CSS的背景樣式
CSSbackground屬性是我們將在本課中學習的許多普通背景屬性的簡寫。如果您在樣式表中發現了一個複雜的背景屬性，可能會覺得難以理解，因為可以同時傳入這麼多值。
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; }
在本教程的後面部分，我們將返回到簡寫的工作方式，但是首先，我們通過分開使用各個普通背景屬性的方式，看一下在CSS中使用背景可以做哪些不同的事情。
背景顏色
background-color屬性定義了CSS中任何元素的背景顏色。屬性接受任何有效的<color>值。背景色擴充套件到元素的內容和內邊距的下面。
在下面的示例中，我們使用了各種顏色值來為元素盒子新增背景顏色：heading和<span>元素。
嘗試修改為任何可用的<color>值。
.box { background-color: #567895; } h2 { background-color: black; color: white; } span { background-color: rgba(255,255,255,.5); }
<div class="box"> <h2>Background Colors</h2> <p>Try changing the background <span>colors</span>.</p> </div>
背景圖片
background-image屬性允許在元素的背景中顯示影象。在下面的例子中，我們有兩個方框——一個是比方框大的背景影象，另一個是星星的小影象。
這個例子演示了關於背景影象的兩種情形。預設情況下，大圖不會縮小以適應方框，因此我們只能看到它的一個小角，而小圖則是平鋪以填充方框。在這種情況下，實際的影象只是單獨的一顆星星。
.a { background-image: url(balloons.jpg); } .b { background-image: url(star.png); }
<div class="wrapper"> <div class="box a"></div> <div class="box b"></div> </div>
如果除了背景影象外，還指定了背景顏色，則影象將顯示在顏色的頂部。嘗試向上面的示例新增一個background-color屬性，看看效果如何。
控制背景平鋪
background-repeat屬性用於控制影象的平鋪行為。可用的值是:
no-repeat— 不重複。repeat-x—水平重複。repeat-y—垂直重複。repeat— 在兩個方向重複。
在下面的示例中嘗試這些值。我們已經將值設定為no-repeat，因此您將只能看到一個星星。嘗試不同的值—repeat-x和repeat-y—看看它們的效果如何。
設定為repeat-x
.box { background-image: url(star.png); background-repeat: repeat-x; }
<div class="box"></div>
調整背景影象的大小
在上面的例子中，我們有一個很大的影象，由於它比作為背景的元素大，所以最後被裁剪掉了。在這種情況下，我們可以使用background-size屬性，它可以設定長度或百分比值，來調整影象的大小以適應背景。
你也可以使用關鍵字:
cover—瀏覽器將使影象足夠大，使它完全覆蓋了盒子區，同時仍然保持其高寬比。在這種情況下，有些影象可能會跳出盒子外contain— 瀏覽器將使影象的大小適合盒子內。在這種情況下，如果影象的長寬比與盒子的長寬比不同，則可能在影象的任何一邊或頂部和底部出現間隙。
在下面的例子中，我使用了上面例子中的大圖，並使用長度單位來調整方框內的大小。你可以看到這扭曲了影象。
試試下面：
- 改變用於修改背景大小的長度單位。
- 去掉長度單位，看看使用
background-size: coverorbackground-size: contain會發生什麼。 - 如果您的影象小於盒子，您可以更改background-repeat的值來重複影象。
.box { background-image: url(balloons.jpg); background-repeat: no-repeat; background-size: 100px 10em; }
<div class="box"></div>
背景影象定位
background-position屬性允許您選擇背景影象顯示在其應用到的盒子中的位置。它使用的座標系中，框的左上角是(0,0)，框沿著水平(x)和垂直(y)軸定位。
注意：預設的背景位置值是(0,0)。
最常見的背景位置值有兩個單獨的值——一個水平值後面跟著一個垂直值。
你可以使用像top和right這樣的關鍵字(在background-image頁面上查詢其他的關鍵字):
.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; }
.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; }
你也可以混合使用關鍵字，長度值以及百分比，例如：
.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px; }
最後，您還可以使用4-value語法來指示到盒子的某些邊的距離——在本例中，長度單位是與其前面的值的偏移量。所以在下面的CSS中，我們將背景從頂部調整20px，從右側調整10px:
.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; }
使用下面的示例來處理這些值並在框內移動星星。
.box { background-image: url(star.png); background-repeat: no-repeat; background-position: 120px 1em; }
<div class="box"></div>
注意：background-position是background-position-x和background-position-y的簡寫，它們允許您分別設定不同的座標軸的值。
漸變背景
當漸變用於背景時，也可以使用像影象一樣的background-image屬性設定。
您可以在MDN的<gradient>資料型別頁面上，瞭解更多關於漸變的不同型別，以及使用它們可以做的事情。使用漸變的一個有趣方法是，使用web上可用的許多CSS漸變生成器之一，比如這個。您可以建立一個漸變，然後複製並貼上生成它的原始碼。
在下面的示例中嘗試一些不同的漸變。在這兩個盒子裡，我們分別有一個線性梯度，它延伸到整個盒子上，還有一個徑向梯度，它有一個固定的大小，因此會重複。
.a { background-image: linear-gradient(105deg, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); } .b { background-image: radial-gradient(circle, rgba(0,249,255,1) 39%, rgba(51,56,57,1) 96%); background-size: 100px 50px; }
<div class="wrapper"> <div class="box a"></div> <div class="box b"></div> </div>
多個背景影象
也可以有多個背景影象——在單個屬性值中指定多個background-image值，用逗號分隔每個值。
當你這樣做時，你可能會以背景影象互相重疊而告終。背景將與最後列出的背景影象層在堆疊的底部，背景影象在程式碼列表中最先出現的在頂端。
注意：漸變可以與常規的背景影象很好地混合在一起。
其它background-*屬性，該屬性值用逗號分隔的方式設定。例如下列background-image：
background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
background-repeat: no-repeat, repeat-x, repeat;
background-position: 10px 20px, top right;
不同屬性的每個值，將與其他屬性中相同位置的值匹配。例如，上面的image1的background-repeat值將是no-repeat。但是，當不同的屬性具有不同數量的值時，會發生什麼情況呢？答案是較小數量的值會迴圈—在上面的例子中有四個背景影象，但是隻有兩個背景位置值。前兩個位置值將應用於前兩個影象，然後它們將再次迴圈—image3將被賦予第一個位置值，image4將被賦予第二個位置值。
我們來試一試。在下面的示例中包含了兩個影象。為了演示疊加順序，請嘗試切換哪個背景影象在列表中最先出現。或使用其他屬性更改位置、大小或重複值。
.box { background-image: url(star.png), url(big-star.png); }
<div class="wrapper"> <div class="box"></div> </div>
背景附加
另一個可供選擇的背景是指定他們如何滾動時，內容滾動。這是由background-attachment屬性控制的，它可以接受以下值:
scroll: 使元素的背景在頁面滾動時滾動。如果滾動了元素內容，則背景不會移動。實際上，背景被固定在頁面的相同位置，所以它會隨著頁面的滾動而滾動。fixed: 使元素的背景固定在檢視埠上，這樣當頁面或元素內容滾動時，它就不會滾動。它將始終保持在螢幕上相同的位置。local: 這個值是後來新增的(它只在Internet Explorer 9+中受支援，而其他的在IE4+中受支援)，因為滾動值相當混亂，在很多情況下並不能真正實現您想要的功能。區域性值將背景固定在設定的元素上，因此當您滾動元素時，背景也隨之滾動。
background-attachment屬性只有在有內容要滾動時才會有效果，所以我們做了一個示例來演示這三個值之間的區別——看看background-attachment.html(或者看看這兒的原始碼))。
使用background 的簡寫
正如我在本課開始時提到的，您將經常看到使用background屬性指定的背景。這種簡寫允許您一次設定所有不同的屬性。
如果使用多個背景，則需要為第一個背景指定所有普通屬性，然後在逗號後面新增下一個背景。在下面的例子中，我們有一個漸變，它指定大小和位置，然後是一個無重複的影象背景，它指定位置，然後是一個顏色。
這裡有一些規則，需要在簡寫背景屬性時遵循，例如:
background-color只能在逗號之後指定。background-size值只能包含在背景位置之後，用'/'字元分隔，例如：center/80%。
檢視background的MDN頁面，以檢視所有的注意事項。
.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; }
<div class="box"></div>
背景的可訪問性考慮
當你把文字放在背景圖片或顏色上面時，你應該注意你有足夠的對比度讓文字對你的訪客來說是清晰易讀的。如果指定了一個影象，並且文字將被放置在該影象的頂部，您還應該指定一個background-color，以便在影象未載入時文字也足夠清晰。
螢幕閱讀者不能解析背景影象，因此背景圖片應該只是純粹的裝飾；任何重要的內容都應該是HTML頁面的一部分，而不是包含在背景中。
邊框
在學習盒子模型時，我們發現了邊框如何影響盒子的大小。在這節課中，我們將看看如何創造性地使用邊界。通常，當我們使用CSS向元素新增邊框時，我們使用一個簡寫屬性在一行CSS中設定邊框的顏色、寬度和樣式。我們可以使用border為一個框的所有四個邊設定邊框。
.box { border: 1px solid black; }
或者我們可以只設置盒子的一個邊，例如:
.box { border-top: 1px solid black; }
這些簡寫的等價於：
.box { border-width: 1px; border-style: solid; border-color: black; }
也可以使用更加細粒度的屬性：
.box { border-top-width: 1px; border-top-style: solid; border-top-color: black; }
注意：這些頂部、右側、底部和左側邊框屬性還具有與文件寫入模式相關的對映邏輯屬性(例如，從左到右或從右到左的文字，或從上到下)。在下一課中，我們將探討這些問題，這包括處理不同的文字指示詳情。
有各種各樣的樣式可以用於邊框。在下面的例子中，為框的四個邊使用了不同的邊框樣式。調整邊框樣式、寬度和顏色，看看邊框是如何工作的。
.box { background-color: #567895; border: 5px solid #0b385f; border-bottom-style: dashed; color: #fff; } h2 { border-top: 2px dotted rebeccapurple; border-bottom: 1em double rgb(24, 163, 78); }
<div class="box"> <h2>Borders</h2> <p>Try changing the borders.</p> </div>
圓角
通過使用border-radius屬性和與方框的每個角相關的長邊來實現方框的圓角。可以使用兩個長度或百分比作為值，第一個值定義水平半徑，第二個值定義垂直半徑。在很多情況下，您將只傳遞一個值，這兩個值都將使用。
例如，要使一個盒子的四個角都有10px的圓角半徑：
.box { border-radius: 10px; }
或使右上角的水平半徑為1em，垂直半徑為10％：
.box { border-top-right-radius: 1em 10%; }
我們在下面的示例中設定了所有四個角，然後更改右上角的值使之不同。您可以使用這些值來更改圓角樣式。檢視border-radius的屬性頁，檢視可用的語法選項。
.box { border: 10px solid rebeccapurple; border-radius: 1em; border-top-right-radius: 10% 30%; }
<div class="box"> <h2>Borders</h2> <p>Try changing the borders.</p> </div>
玩轉背景和邊框
為了測試你的新知識，嘗試使用背景和邊框建立以下內容，使用下面的例子作為起點:
- 給方框一個5px的黑色實心邊框，圓角為10px。
- 新增一個背景影象(使用URL balloons.jpg)，並調整它的大小，使它能夠覆蓋盒子。
- 給<h2>一個半透明的黑色背景顏色，並使文字為白色。
.box {
}
h2 {
}
<div class="box"> <h2>Backgrounds & Borders</h2> </div>
注意：您可以點選這兒檢視解決方案——但請先嚐試一下自己能否實現。