CSS Properties - 其他

以未歸類的屬性為主，如: 控制滑鼠互動、可見度、裁切、溢位等。

overflow

overflow 屬性用於控制當元素的內容超出其容器的大小時該如何處理? 也就是用於處理內容溢出的情況。

• visible: 內容不會被裁切，超出的容器部分仍然可見，預設值。
• hidden: 內容會被裁切，超出容器的部分即隱藏。
• scroll: 內容會被裁切，但無論內容是否超出容器都會顯示捲動軸。
• auto: 內容會被裁切，只有當內容超出容器時才會顯示捲動軸。

以下案例便是利用 overflow 的屬性進行溢位的改變。

overflow-x

控制水平方向的溢出行為。

overflow-y

控制垂直方向的溢出行為。

cursor

用於設定當滑鼠指標移動到元素上時顯示的游標樣式。這個屬性可以用於改善使用者體驗，特別是在互動式元素，如: 按鈕或連結中。

• default: 箭頭圖示，預設游標。
• pointer: 手指圖示，通常用於可點擊的元素。
• text: 文本選取圖示，通常用於可編輯或可選取的文字區域。
• not-allowed: 禁止符號，表示該操作不可用。
• wait:等待圖示，通常用於表示正在處理某些操作。
• move: 移動圖示，表示元素可以被拖動。
• crosshair: 十字準星圖示，通常用於精確選取。
• help: 問號圖示，表示有額外的幫助資訊可用。
• 自訂圖示:
  • url(): 指定自訂游標的圖片路徑。
  • 備用值: 如果圖片無法下載，會使用備用的樣式，如: auto。

visibility

控制元素是否可見，但仍占據空間。

• visible: 可見（預設）。
• hidden: 不可見，但仍保留空間。
• collapse: 將表格行或列隱藏，並且不佔據空間。對於非表格元素，效果與 hidden 相同。

小提醒

對比用法: display: none 則是完全從版面中移除(不占空間)。

opacity

用於設定元素的透明度，這個屬性常用於製作淡入淡出效果或設計透明背景。

• 0: 表示完全透明，0%。
• 1: 表示完全不透明，100%。
• 0.5:　半透明，50%。

content

只能用在 ::before 和 ::after 偽元素中，添加裝飾性內容，請看 偽元素/無中生有。

clip-path

用於裁切元素的可見區域，通過定義一個裁切區域，僅顯示該區域內的內容，區域外的內容將被隱藏。

• circle(): 圓形裁切區域。未設定參數時，即 closest-slide，元素既有的寬、高仍然存在。

  clip-path: circle(半徑);
  clip-path: circle(半徑 at 圓心的x位置 圓心的y位置);

  • closest-slide: 以中心至父層最短的距離為半徑，進行可見度裁切。
  • farthest-slide: 以中心至父層最短的距離為半徑，進行可見度裁切。
  • 80px: 半徑為 80px，圓心位置正中央。
  • 80px at 100% 100%: 半徑為 80px，圓心位置於元素的右下角。

  以下案例便是利用 circle() 將元素進行圓形裁切。

• ellipse(): 橢圓形裁切區域。未設定參數時，即最大的圓角呈現，元素既有的寬、高仍然存在。

  clip-path: ellipse(水平半徑 垂直半徑);
  clip-path: ellipse(水平半徑 垂直半徑 at 圓心的x位置 圓心的y位置);

  • closest-slide: 以中心至父層最短的距離為半徑，進行可見度裁切。
  • farthest-slide: 以中心至父層最短的距離為半徑，進行可見度裁切。

  以下案例便是利用 ellipse() 將元素進行橢圓形裁切。

• rect(): 四邊形裁切區域。未設定參數，無效果。

  clip-path: rect(a b c d);
  clip-path: rect(a b c d round 數值);

  • a: 元素上緣與路徑上緣的距離。
  • b: 元素左緣與路徑右緣的距離。
  • c: 元素上緣與路徑下緣的距離。
  • d: 元素左緣與路徑左緣的去離。
  • round 數值: 圓角設定。

  以下案例便是利用 rect() 將元素進行四邊形裁切。

• polygon(): 多邊形裁切區域。未設定參數，無效果。

  clip-path: rect(x位置 y位置, x位置 y位置, ...);

  以下案例便是利用 polygon() 將元素進行多邊形裁切。

• inset(): 內縮邊距和圓角。未設定參數，無效果。

  clip-path: inset(全部);
  clip-path: inset(上下 左右 round 數值);

  以下案例便是利用 inset() 將元素進行內縮裁切。

• xywh(): 依左上角為原點，利用 x、y 位置、寬、高來定義四邊形。

  clip-path: xywh(x位置 y位置 寬度 高度);
  clip-path: xywh(x位置 y位置 寬度 高度 round 數值);

  以下案例便是利用 xywh() 定義四邊形。