CSS3 背景與邊框模組

舉例來說，以下宣告整體：

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass1.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

例子：

h1 { background-color: #F00 } /* 設背景為紅色。 */

以下宣告給出後面說明（水平、垂直）的偏移（從左上角）：

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

舉例來說，如果取值對是 ‘0% 0%’，背景圖像的左上角會跟盒的邊距盒（一般來說）的左上角對齊。取值對 ‘100% 100%’ 會將圖像的右下角放在區域的右下角。取值對 ‘75% 25%’ 會將圖像中從左往右 75% 從上往下 25% 的點放在區域中從左往右 75% 從上往下 25% 的點。

以下 ‘background’ 縮寫宣告使用的關鍵字把 ‘background-position’ 設為後面說明的百分比取值。

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

以下的範例會把（單一個）圖像放在視口的右下角。

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

背景可以相對於不是左上角的角落定位。例：下面宣告將背景圖像放在底邊 10px 從右邊 3px 的位置：

background-position: right 3em bottom 10px

下面例子的第一個規則中，給定的只有一個 ‘background-color’ 而其他屬性會被設為初始值。第二個規則指定了所有屬性。

body { background: red }
p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; }

第一個規則與下面同等：

body {

   background-color: red;
   background-position: 0% 0%;
   background-size: auto;
   background-repeat: repeat;
   background-clip: border-box;
   background-origin: padding-box;
   background-attachment: scroll;
   background-image: none }

第二個與下面同等：

p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url("chess.png") }

下面例子展示了同時設定底色（‘#CCC’）和背景圖像（‘url("mental.jpg"’）。使用者代理會放大圖像到跟元素寬度一致。

div { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

另一個展示同等性的例子：

div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto }

以下具有逗號區隔的多個取值的宣告

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

等同於

background-image:      url(a.png),  url(b.png),  url(c.png);
background-position:   0% 0%,       center,      0% 0%;
background-repeat:     no-repeat,   no-repeat,   repeat;
background-clip:       border-box,  border-box,  border-box;
background-origin:     padding-box, padding-box, padding-box;
background-size:       auto,        100% 100%,   auto;
background-attachment: scroll,      scroll,      scroll;
background-color:      white;

舉例來說，下面的第一個宣告等同於後面的五個宣告的集合：

p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

考慮這個範例：

blockquote {
  border-color: red;
  border-left: double;
  color: black
}

border-radius: 4em;

等同於

border-top-left-radius:     4em;
border-top-right-radius:    4em;
border-bottom-right-radius: 4em;
border-bottom-left-radius:  4em;

而且

border-radius: 2em 1em 4em / 0.5em 3em;

等同於

border-top-left-radius:     2em 0.5em;
border-top-right-radius:    1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius:  1em 3em;

這個例子使用了適當的邊距使得內容不會溢出角落。請注意儘管沒有邊框，背景還是會有圓角。

DIV {
    background: black;
    color: white;
    border-radius: 1em;
    padding: 1em }

舉例來說，下圖 A 和 D 的邊框為這段規則的結果：

box-sizing: border-box;
width: 6em;
height: 2.5em;
border-radius: 0.5em 2em 0.5em 2em

其中，對於指定的半徑（0.5em 加 2.0em），高度（2.5em）已經夠了。然而，如果高度只有 2em：

box-sizing: border-box;
width: 6em;
height: 2em;
border-radius: 0.5em 2em 0.5em 2em

所有角都必須縮小至原先的 0.8。邊框半徑的使用值也因此變成 0.4 em（而不是 0.5 em）與 1.6em（而不是 2em）。參見下圖 B 與 C 的邊框。

這個例子中的頂邊與底邊邊框由整數個橙色菱形構成，左邊與右邊邊框是單一個拉長的菱形，四個角落是不同顏色的菱形。用來鋪設的圖像為下，除了菱形部份以外，圖像是透明的：

圖像的像素是 81x81，分為九個一樣大的部份，樣式宣告為以下情形：

使用在 12x5 em 的 DIV 上的結果跟下面類似：

這是一個展示圖像邊框如何使用備用邊框樣式，但也擴展到邊框區域以外的複雜例子。圖像邊框是坡浪狀的綠色邊框，並有特殊的角落效果：

圖 10. ‘border-image-source’ 圖像，用四個 ‘border-image-slice’ 切在 124px 的地方，將圖像切成九的部份。

其餘的邊框屬性則將各部份鋪設成下面的樣子：

圖 11. 所有圖線邊框屬性與互相之間如何影響的圖，包含有或沒有圖像邊框時的渲染情形。

請注意 ‘border’ 屬性會重設 ‘border-image’，讓取消、重設邊框效果更為簡單：

    .notebox {
      border: double orange;
      /* 必須先設置 'border' 縮寫，否則會蓋掉 'border-image' */
      border-image: url("border.png") 30 round;
      /* 可以在這裡設置其他 'border' 屬性 */
      border-width: thin thick;
    }
    ...
    .sidebar .notebox {
      box-shadow: 0 0 5px gray;
      border-radius: 5px;
      border: none; /* 取消所有邊框 */
      /* 'border' 縮寫重設了 'border-image' */
    }