使用 CSS 解決常見問題
此頁總結問與答,以及 MDN 網站上其它能幫助你解決常見 CSS 問題的資源。
修飾盒子
- 如何為元素新增 Drop-Shadow?
-
陰影可以透過
box-shadow
屬性添加給盒子。這個教學解釋它如何運作並提供範例。 - 如何用圖片填滿盒子同時不讓該圖片變形?
-
object-fit
屬性提供將圖片置入長寬比不同的盒子中的各種方式。你能在這個教學中了解如何利用它們。 - 什麼方法可以用來修飾盒子?
-
展示一系列用 CSS 修飾盒子時能派上用場的屬性。
- 如何把元素設為半透明?
-
opacity
屬性及擁有 alpha 通道的顏色數值可以解決這個問題。
盒子修飾教學與指南
CSS 與文字
- 如何為文字新增 Drop-Shadow?
-
陰影可以透過
text-shadow
屬性添加給文字。這個教學解釋它如何運作並提供範例。 - 如何強調段落第一行?
-
了解如何透過偽元素
::first-line
抓到段落第一行。 - 如何強調文章第一段?
-
了解如何透過偽類別
::first-child
抓到第一個段落。 - 如何僅強調出現在標題之後的第一段?
-
組合器能幫助你基於文件裡的位置精準抓取元素;這個教學解釋如何使用讓 CSS 僅套用於出現在標題之後的第一段。
文字修飾教學與指南
CSS 布局
- 如何置中項目?
-
在盒子裡將項目水平或垂直置中以前很麻煩,但現在彈性盒子讓它變得很簡單。
布局指南
备注: 我們有一本針對 CSS 布局解法的食譜,內有可正常執行的範例與常見布局任務說明。