解決常見的 CSS 問題
此頁面彙總了 MDN 網站上的問答及其他材料,可以幫助您解決常見的 CSS 問題。
樣式化盒子
- 如何給元素新增陰影?
-
可以使用
box-shadow屬性為盒子新增陰影。本教程將解釋其工作原理並展示一個示例。 - 如何用圖片填充盒子而不扭曲圖片?
-
object-fit屬性提供了不同的方式來將圖片適應到一個具有不同 縱橫比 的盒子中,您可以在本教程中找到如何使用它們。 - 可以使用哪些方法來樣式化盒子?
-
關於使用 CSS 樣式化盒子時可能很有用的各種屬性的概述。
- 如何讓元素半透明?
-
可以使用
opacity屬性和帶有 alpha 通道的顏色值來實現;找出何時使用哪一個。
盒子樣式課程和指南
CSS 與文字
- 如何給文字新增陰影?
-
可以使用
text-shadow屬性為文字新增陰影。本教程將解釋其工作原理並展示一個示例。 - 如何突出顯示段落的第一行?
-
瞭解如何使用
::first-line偽元素來定位段落中的第一行文字。 - 如何突出顯示文章中的第一個段落?
-
瞭解如何使用
:first-child偽類來定位第一個段落。 - 如何僅在段落緊跟在標題之後時突出顯示它?
-
組合選擇器可以幫助您根據元素在文件中的位置精確地定位元素;本教程將解釋如何使用它們將 CSS 應用於僅在標題之後立即出現的段落。
文字樣式課程和指南
CSS 佈局
- 如何將專案居中?
-
過去,將專案水平和垂直地置於另一個盒子中可能很棘手,但現在 flexbox 使其變得簡單。
佈局指南
注意:我們有一個專門介紹 CSS 佈局解決方案 的食譜,其中包含完整的可執行示例和常見佈局任務的解釋。還可以檢視 實用定位示例,其中展示瞭如何使用定位來建立標籤式資訊框和滑動隱藏面板。