1. 學習
  2. 核心學習模組
  3. CSS 樣式基礎
  4. 背景和邊框

背景和邊框

在本課程中，我們將瞭解如何利用 CSS 背景和邊框實現一些創意效果。從新增漸變、背景影像到圓角，背景和邊框能夠解決 CSS 中許多樣式問題。

預備知識 HTML 基礎（學習 HTML 基礎語法）、CSS 值和單位、CSS 尺寸設定。
學習成果
  • 基本背景樣式 — 顏色和影像。
  • 背景影像尺寸、重複、位置和附件。
  • 背景漸變 — 一般概念和線性漸變（徑向漸變、錐形漸變和重複漸變更高階；在此階段無需深入瞭解。）
  • 背景的無障礙性考量 — 確保良好的對比度。
  • 邊框基礎 — 寬度、樣式、顏色和邊框簡寫。圓角邊框半徑。

背景顏色

background-color 屬性定義了 CSS 中任何元素的背景顏色。該屬性接受任何有效的 <color> 值。background-color 延伸到元素的內容和內邊距框之下。

在下面的示例中，我們使用了各種顏色值來為盒子、標題和 <span> 元素新增背景顏色。

嘗試編輯示例，並將指定的顏色替換為任何可用的 <color> 值。

html
<div class="box">
  <h2>Background Colors</h2>
  <p>Try changing the background <span>colors</span>.</p>
</div>
css
.box {
  padding: 0.3em;
  background-color: #567895;
}

h2 {
  background-color: black;
  color: white;
}
span {
  background-color: rgb(255 255 255 / 50%);
}

背景影像

background-image 屬性允許在元素的背景中顯示影像。在下面的示例中，我們有兩個盒子 — 一個的背景影像比盒子大 (balloons.jpg)。另一個有一個小星星的影像 (star.png)。

此示例演示了背景影像的兩件事。預設情況下，大影像不會按比例縮小以適應盒子，所以我們只看到它的一小部分，而小影像則平鋪以填充盒子。

html
<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>
css
.wrapper {
  display: flex;
}

.box {
  width: 200px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
}

.b {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
}

如果您除了背景影像之外還指定了背景顏色，那麼影像會顯示在顏色之上。嘗試在上面的示例中新增 background-color 屬性，看看它的效果。

控制 background-repeat

background-repeat 屬性用於控制影像的平鋪行為。可用值包括：

  • no-repeat — 完全停止背景重複。
  • repeat-x — 水平重複。
  • repeat-y — 垂直重複。
  • repeat — 預設值；在兩個方向上重複。
  • space — 儘可能多地重複，如果有額外空間，則在影像之間新增空間。
  • round — 類似於 space，但會拉伸影像以填充任何額外空間。

在下面的示例中嘗試這些值。我們已將值設定為 no-repeat，因此您只會看到一顆星星。嘗試不同的值以檢視它們的效果。

html
<div class="box"></div>
css
.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
}

調整背景影像尺寸

最初背景影像示例中使用的 balloons.jpg 影像是一個大影像，由於它比作為背景的元素大，因此被裁剪了。在這種情況下，我們可以使用 background-size 屬性來調整影像大小以適應背景。

background-size 可以採用兩個 <length> 或 <percentage> 值來指定影像在水平和垂直方向上的大小，或者以下關鍵字：

  • cover — 瀏覽器會使影像足夠大，使其完全覆蓋盒子區域，同時保持其寬高比。在這種情況下，部分影像可能會超出盒子。
  • contain — 瀏覽器會使影像大小合適以適應盒子內部。在這種情況下，如果影像的寬高比與盒子的不同，您可能會在影像的兩側或頂部和底部出現空白。

使用 background-size

在下面的示例中，balloons.jpg 影像已設定長度單位，使其適合盒子內部。您可以看到這已使影像失真。

嘗試以下操作：

  • 更改用於修改背景大小的長度單位。
  • 刪除長度單位，並檢視使用 background-size: cover 或 background-size: contain 時會發生什麼。
  • 將影像尺寸設定得比盒子小，然後更改 background-repeat 的值以重複影像。
html
<div class="box"></div>
css
.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/balloons.jpg");
  background-repeat: no-repeat;
  background-size: 80px 10em;
}

定位背景影像

background-position 屬性允許您選擇背景影像在應用它的盒子上的位置。這使用了一個座標系，其中盒子的左上角是 (0,0)，並且盒子沿水平 (x) 和垂直 (y) 軸定位。

注意：預設的 background-position 值為 (0,0)。

最常見的 background-position 值採用兩個單獨的值 — 一個水平值，後跟一個垂直值。您可以使用關鍵字，例如 top 和 right（在 background-position 頁面上查詢其他關鍵字）

css
.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top center;
}

您還可以使用 lengths 和 percentages

css
.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px 10%;
}

您還可以將關鍵字值與長度或百分比混合使用，在這種情況下，第一個值表示水平位置，第二個值表示垂直位置。例如：

css
.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: 20px top;
}

最後，您還可以使用 4 值語法來指示與盒子特定邊緣的距離。每對值表示要偏移的盒子邊緣，以及與該邊緣的偏移量。在下面的程式碼片段中，我們將背景定位為距離 top 20px 和距離 right 10px。

css
.box {
  background-image: url("image.png");
  background-repeat: no-repeat;
  background-position: top 20px right 10px;
}

使用 background-position

使用下面的示例來嘗試這些值，並在盒子內移動星星。

html
<div class="box"></div>
css
.box {
  background-image: url("https://mdn.github.io/shared-assets/images/examples/star.png");
  background-repeat: no-repeat;
  background-position: 120px 1em;
}

注意：這裡使用了簡寫 background-position，而不是 background-position-x 和 background-position-y，後者允許您單獨設定不同的軸位置值。

漸變背景

漸變——當用作背景時——就像影像一樣，也透過使用 background-image 屬性來設定。

您可以在 MDN 頁面上的 <gradient> 資料型別中找到關於不同型別漸變值以及您可以如何使用它們的資訊。

在下面的示例中嘗試一些不同的漸變值。最初，我們有一個線性漸變，它延伸覆蓋整個第一個盒子，還有一個徑向漸變，具有設定的大小，並在第二個盒子中重複。

html
<div class="wrapper">
  <div class="box a"></div>
  <div class="box b"></div>
</div>
css
.wrapper {
  display: flex;
}

.box {
  width: 400px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.a {
  background-image: linear-gradient(
    105deg,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
}

.b {
  background-image: radial-gradient(
    circle,
    rgb(0 249 255 / 100%) 39%,
    rgb(51 56 57 / 100%) 96%
  );
  background-size: 100px 50px;
}

注意：一個玩轉漸變的有趣方式是使用網路上許多可用的 CSS 漸變生成器之一，例如 CSSGradient.io。您可以建立一個漸變並複製生成它的原始碼。

多背景影像

也可以在單個宣告中指定多個背景影像。您可以透過用逗號分隔多個 background-image 值來實現此目的。

當您這樣做時，背景影像可能會相互重疊。背景將按層堆疊，最後一個列出的背景影像位於堆疊底部，每個之前的影像堆疊在其程式碼中後續影像的上方。

注意：漸變可以與常規背景影像很好地混合使用。

其他 background-* 屬性也可以像 background-image 一樣具有逗號分隔的值。

css
background-image:
  url("image1.png"), url("image2.png"), url("image3.png"), url("image4.png");
background-repeat: no-repeat, repeat-x, repeat;
background-position:
  10px 20px,
  top right;

不同屬性的每個值將與其他屬性中相同位置的值匹配。例如，上面 image1 的 background-repeat 值將是 no-repeat。然而，當不同屬性具有不同數量的值時會發生什麼？答案是值較少的屬性將迴圈 — 在上面的示例中，有四個背景影像，但只有兩個 background-position 值。前兩個位置值將應用於前兩個影像，然後它們將再次迴圈 — image3 將被賦予第一個位置值，image4 將被賦予第二個位置值。

使用多個背景影像

我們來玩一下。下面的示例包含兩個背景影像。嘗試按以下方式編輯示例：

  • 為了演示堆疊順序，嘗試切換列表中哪個背景影像首先出現。
  • 新增其他 background-* 屬性以更改影像的位置、大小或重複值。
  • 嘗試新增一個漸變作為第三個 background-image。
html
<div class="wrapper">
  <div class="box"></div>
</div>
css
.wrapper {
  display: flex;
}

.box {
  width: 500px;
  height: 80px;
  padding: 0.5em;
  border: 1px solid #cccccc;
  margin: 20px;
}

.box {
  background-image:
    url("https://mdn.github.io/shared-assets/images/examples/star.png"),
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png");
}

背景附件

我們還可以為背景指定在內容滾動時它們如何滾動。這透過 background-attachment 屬性控制，該屬性可以採用以下值：

  • scroll：當頁面滾動時，元素的背景隨之滾動。如果元素內容滾動，背景不移動。實際上，背景固定在頁面的同一位置，因此它隨頁面滾動而滾動。
  • fixed：使元素的背景固定到視口，這樣當頁面或元素內容滾動時，它不會滾動。它將始終保持在螢幕上的相同位置。
  • local：將背景固定到設定它的元素上，因此當您滾動元素時，背景也隨之滾動。

background-attachment 屬性僅在有內容可滾動時才有效，因此我們製作了一個演示來展示這三個值之間的差異 — 請檢視 background-attachment.html（也可在此處檢視原始碼）。

使用背景簡寫屬性

您經常會看到使用 background 簡寫屬性指定背景，該屬性允許您一次性設定所有不同的屬性。

如果使用多個背景，您需要為第一個背景指定所有屬性，然後用逗號分隔新增下一個背景。在下面的示例中，我們有一個帶大小和位置的漸變，然後是一個帶 no-repeat 和位置的影像背景，然後是顏色。

在編寫背景影像簡寫值時需要遵循一些規則，例如：

  • background-color 只能在最後一個逗號之後指定。
  • background-size 的值只能緊跟在 background-position 之後，用 / 字元分隔，例如：center/80%。

請檢視 background 的 MDN 頁面以瞭解更多關於語法的資訊。

html
<div class="box"></div>
css
.box {
  width: 500px;
  height: 300px;
  padding: 0.5em;
  background:
    linear-gradient(
        105deg,
        rgb(255 255 255 / 20%) 39%,
        rgb(51 56 57 / 100%) 96%
      )
      center center / 400px 200px no-repeat,
    url("https://mdn.github.io/shared-assets/images/examples/big-star.png")
      center no-repeat,
    rebeccapurple;
}

背景的無障礙性考量

當將文字放置在背景影像或顏色之上時，您應確保文字具有足夠的對比度，以便訪問者能夠清晰閱讀。當指定帶有文字內容的影像時，您還應指定一個 background-color，以便在影像未載入時文字仍可清晰閱讀。

螢幕閱讀器無法解析背景影像；因此，它們應純粹是裝飾性的。任何重要的內容都應是 HTML 頁面的一部分，而不應包含在背景中。

邊框

在學習盒模型時，我們發現了邊框如何影響盒子的大小。在本課程中，我們將探討如何創造性地使用邊框。

通常，當我們使用 CSS 為元素新增邊框時，我們使用 border 簡寫屬性在一個宣告中設定盒子所有四條邊的邊框顏色、寬度和樣式。

css
.box {
  border: 1px solid black;
}

或者我們可以針對盒子的一條邊，例如：

css
.box {
  border-top: 1px solid black;
}

單個屬性包括 border-width、border-style 和 border-color 簡寫屬性。

css
.box {
  border-width: 1px;
  border-style: solid;
  border-color: black;
}

還有針對四條邊的寬度、樣式和顏色的長手屬性。

css
.box {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: black;
}

注意：這些上、右、下、左邊框屬性還具有對映的邏輯邊框屬性，這些屬性與文件的書寫模式相關（例如，從左到右或從右到左的文字，或從上到下）。您可以在處理不同文字方向中閱讀這些內容。

使用邊框

邊框有各種樣式可供使用。在下面的示例中，我們為盒子使用了兩種不同的邊框樣式，為標題使用了兩種不同的邊框樣式。嘗試調整邊框樣式、寬度和顏色，看看邊框是如何工作的。

html
<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>
css
* {
  padding: 0.2em;
}
.box {
  width: 500px;
  background-color: #567895;
  border: 5px solid #0b385f;
  border-bottom-style: dashed;
  color: white;
}

h2 {
  border-top: 2px dotted rebeccapurple;
  border-bottom: 1em double rgb(24 163 78);
}

圓角

您可以使用 border-radius 屬性和與其相關的長手屬性為盒子新增圓角，這些長手屬性與盒子的每個角相關。可以使用兩個長度或百分比作為值，第一個值定義水平半徑，第二個值定義垂直半徑。在許多情況下，您只需傳入一個值，該值將同時用於兩者。

例如，要使盒子的所有四個角都具有 10px 的半徑：

css
.box {
  border-radius: 10px;
}

或者使右上角具有 1em 的水平半徑和 10% 的垂直半徑：

css
.box {
  border-top-right-radius: 1em 10%;
}

注意：與上述邊框屬性一樣，這些 border-radius 屬性也具有對映的邏輯 border-radius 屬性。

使用邊框半徑

我們已經在下面的示例中設定了所有四個角，然後更改了右上角的值以使其不同。您可以調整這些值來更改角。請檢視 border-radius 屬性頁面以檢視可用的語法選項。邊框半徑生成器可用於為您輸出圓角值。

html
<div class="box">
  <h2>Borders</h2>
  <p>Try changing the borders.</p>
</div>
css
.box {
  width: 500px;
  height: 110px;
  padding: 0.5em;
  border: 10px solid rebeccapurple;
  border-radius: 1em;
  border-top-right-radius: 10% 30%;
}

總結

您可以看到，為盒子新增背景或邊框涉及的內容相當多。如果您想了解更多關於此處討論的任何功能，請探索不同的屬性頁面。MDN 上的幾乎每個頁面都有示例供您練習，以增強您的知識。

在下一篇文章中，我們將為您提供一些測試，您可以用來檢查您對我們提供的背景和邊框樣式資訊的理解和掌握程度。

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.