CSS Properties - 視覺

backgroud

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

backgrond 縮寫

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

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