CSS 視覺屬性：背景、框線、圓角與陰影

background

CSS 的 background 屬性用於設定元素的背景樣式，提供了多種選項來控制背景的顯示方式。

background 縮寫

background-color

使用 色彩表示法，設定背景色彩。

background-image

設定背景影像。

• url(): 指定影像的 URL。

  background-image: url("影像來源");
  background-image: url("影像來源"), url("影像來源");

• linear-gradient(): 線性漸層。

  background-image: linear-gradient(方向, 色彩, 色彩);
  background-image: linear-gradient(方向, 色彩 位置, 色彩 位置);

  • 方向: 色彩的排列方向。
    • to top: 向上。例如：0、0deg。
    • to bottom: 向下。例如：180deg。
    • to left: 向左。例如：270deg。
    • to right: 向右。例如：90deg。
    • to left top: 向左上。例如：315deg。
    • to left bottom: 向左下。例如：225deg。
    • to right top: 向右上。例如：45deg。
    • to right bottom: 向右下。例如：135deg。
  • 色彩: 使用 色彩表示法，設定色彩。
  • 位置: 設定指定色彩的位置。例如：10%。
  
  

• radial-gradient(): 放射狀漸層。

  background-image: radial-gradient(色彩, 色彩);
  background-image: radial-gradient(形狀, 色彩, 色彩);
  background-image: radial-gradient(形狀 at 中心位置, 色彩, 色彩);
  background-image: radial-gradient(形狀 範圍 at 中心位置, 色彩, 色彩);

  • 色彩: 使用 色彩表示法，設定色彩。
  • 形狀:
    • ellipse: 橢圓形，預設值。
    • circle: 圓形。
  • 中心位置: 漸層色的開始位置。
    • at center: 水平、垂直皆置中。例如：at 50% 50%。
    • at top: 水平置中、垂直靠上。例如：at 50% 0、at center 0。
    • at bottom: 水平置中、垂直靠下。例如：at 50% 100%、at center 100%。
    • at left: 水平靠左、垂直置中。例如：at 0 50%、at left 50%。
    • at right: 水平靠右、垂直置中。例如：at 100% 50%、at right 50%。
    • at left top: 水平靠左、垂直靠上。例如：at 0 0、at left 0。
    • at left bottom: 水平靠左、垂直靠下。例如：at 0 100%、at left 100%。
    • at right top: 水平靠右、垂直靠上。例如：at 100% 0、at right 0。
    • at right bottom: 水平靠右、垂直靠下。例如：at 100% 100%、at right 100%。
  • 範圍:
    • closest-side: 漸層中心與離最近的垂直邊、水平邊會相切。
    • closest-corner: 漸層中心與離最近的角相交。
    • farthest-side: 漸層中心與離最遠的垂直邊、水平邊會相切。
    • farthest-corner: 漸層中心與離最遠的角相交。
  
  

background-repeat

控制背景影像是否重複。

• repeat: 全部重複，預設值。
• no-repeat: 不重複。
• repeat-x: 水平重複。
• repeat-y: 垂直重複。

background-position-x

定義背景影像的水平位置。

• left: 靠左對齊，預設值。
• center: 置中對齊。
• right: 靠右對齊。
• 50px: 向右移動 50 像素。

background-position-y

定義背景影像的垂直位置。

• top: 靠上對齊，預設值。
• center: 置中對齊。
• bottom: 靠下對齊。
• 50px: 向下移動 50 像素。

background-attachment

控制背景影像是否隨畫面的捲動而移動。

• scroll: 隨畫面捲動。
• fixed: 固定不動。

background-size

定義背景影像的大小。

• cover: 影像套用整個容器，可能會裁剪。
• contain: 影像完全顯示，可能會留白。
• 50%: 以比例控制大小。

border

border 縮寫

border-style

設定邊框樣式。

• none: 無。
• solid: 實線。
• dotted: 點狀線。
• dashed: 虛線。
• double: 雙畫線。
• groove: 凹線。
• ridge: 凸線。
• inset: 嵌入線。
• outset: 浮出線。

border-width

使用 單位表示法，設定邊框粗細。

border-color

使用 色彩表示法，設定邊框色彩。

border-radius

使用 單位表示法，設定圓角。

border-radius 縮寫

border-top-left-radius

設定左上方圓角。

border-top-right-radius

設定右上方圓角。

border-bottom-left-radius

設定左下方圓角。

border-bottom-right-radius

設定右下方圓角。

box-shadow

設定元素的區塊陰影。

box-shadow: 水平 垂直 羽化 擴散 色彩 內嵌;

Multiple Shadows

以 , 區隔，每組陰影的設定。

text-shadow

設定元素的文字陰影。

text-shadow: 水平 垂直 羽化 色彩;

Multiple Shadows

以 , 區隔，每組陰影的設定。

陰影的數值順序

box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
/*          ↑  ↑    ↑    ↑
            水平 垂直 模糊  顏色  */

第四個數值是擴散半徑，可省略。想做出柔和的浮起效果，就把垂直位移小、模糊半徑大。

背景圖片還是 img

情況	該用
純裝飾的紋理、漸層	background-image
內容的一部分，例如：商品照	<img>

判斷方式：拿掉它之後資訊有沒有缺少。有缺少就是內容，應該寫在 HTML 裡並補上 alt。

常見問題

背景圖片和 img 標籤該用哪個？

純裝飾用背景圖片，內容的一部分就用 <img>。判斷方式是：拿掉它之後資訊有沒有缺少；有缺少就代表它是內容，應該寫在 HTML 裡並補上替代文字。

陰影的四個數值分別是什麼？

依序是水平位移、垂直位移、模糊半徑與擴散半徑，最後接顏色。只想要柔和的陰影時，把模糊調大、擴散留空即可。

圓角可以做出橢圓形嗎？

可以。在圓角的值中加上 /，斜線前後分別是水平與垂直半徑，就能做出橢圓角；把半徑設成一半的寬高則會變成圓形。

框線會影響元素的大小嗎？

在預設的 盒模型 下會。把 box-sizing 設成 border-box 之後，框線與內距都會算進設定的寬高裡，尺寸就好預測多了。

延伸閱讀

色彩表示法區塊模型元素尺寸CSS Sprite