使用 CSS 解決常見問題

本頁面彙總了 MDN 網站上的問題和答案以及其他資料,可以幫助您解決常見的 CSS 問題。

樣式化盒子

如何給元素新增陰影?

可以使用 box-shadow 屬性為方框新增陰影。本教程將解釋其工作原理並展示一個示例。

如何在不扭曲影像的情況下用影像填充方框?

object-fit 屬性提供了不同的方式將影像適應到與 縱橫比 不同的方框中,您可以在本教程中瞭解如何使用它們。

可以使用哪些方法來設定方框的樣式?

使用 CSS 設定方框樣式時,可能會有用的不同屬性的概述。

如何使元素半透明?

可以使用 opacity 屬性和帶有 Alpha 通道的顏色值來實現;瞭解何時使用哪一個。

方框樣式課程和指南

CSS 和文字

如何給文字新增陰影?

可以使用 text-shadow 屬性為文字新增陰影。本教程將解釋其工作原理並展示一個示例。

如何突出顯示段落的第一行?

瞭解如何使用 ::first-line 偽元素來定位段落中的第一行文字。

如何突出顯示文章中的第一個段落?

瞭解如何使用 :first-child 偽類來定位第一個段落。

如何只在段落緊接標題之後才突出顯示它?

組合器可以幫助您根據元素在文件中的位置來精確定位元素;本教程解釋瞭如何使用它們僅在段落緊接標題之後才將 CSS 應用於段落。

文字樣式課程和指南

CSS 佈局

如何居中一個專案?

在另一個方框內水平和垂直居中一個專案曾經很棘手,但現在 flexbox 使其變得簡單。

佈局指南

注意: 我們有一個專門針對 CSS 佈局解決方案 的食譜,其中包含完整的示例和對常見佈局任務的解釋。還可以檢視 實際定位示例,該示例展示瞭如何使用定位來建立選項卡式資訊框和滑動隱藏面板。