使用 CSS 解決常見問題

此頁總結問與答,以及 MDN 網站上其它能幫助你解決常見 CSS 問題的資源。

修飾盒子

如何為元素新增 Drop-Shadow?

陰影可以透過 box-shadow 屬性添加給盒子。這個教學解釋它如何運作並提供範例。

如何用圖片填滿盒子同時不讓該圖片變形?

object-fit 屬性提供將圖片置入長寬比不同的盒子中的各種方式。你能在這個教學中了解如何利用它們。

什麼方法可以用來修飾盒子?

展示一系列用 CSS 修飾盒子時能派上用場的屬性。

如何把元素設為半透明?

opacity 屬性及擁有 alpha 通道的顏色數值可以解決這個問題。

盒子修飾教學與指南

CSS 與文字

如何為文字新增 Drop-Shadow?

陰影可以透過 text-shadow 屬性添加給文字。這個教學解釋它如何運作並提供範例。

如何強調段落第一行?

了解如何透過偽元素 ::first-line 抓到段落第一行。

如何強調文章第一段?

了解如何透過偽類別 ::first-child 抓到第一個段落。

如何僅強調出現在標題之後的第一段?

組合器能幫助你基於文件裡的位置精準抓取元素;這個教學解釋如何使用讓 CSS 僅套用於出現在標題之後的第一段。

文字修飾教學與指南

CSS 布局

如何置中項目?

在盒子裡將項目水平或垂直置中以前很麻煩,但現在彈性盒子讓它變得很簡單。

布局指南

备注: 我們有一本針對 CSS 布局解法的食譜,內有可正常執行的範例與常見布局任務說明。