如何在 CSS 中的單一元素上建立多個框陰影？

在單一元素上使用多個CSS3 框陰影

在CSS 中，可以使用CSS3 將多個框陰影應用於單一元素。這在創建複雜的陰影效果時提供了更大的靈活性，例如將內部發光與外部陰影相結合。

問題：

您想要複製一個 Photoshop 模型按鈕上有兩個陰影：內部打火機框陰影和外部投影。然而，CSS box-shadow 屬性似乎只允許每個元素有一個陰影效果。

解決方案：

要達到所需的雙重陰影效果，可以使用用於指定多個陰影的逗號分隔語法。例如：

<code class="css">box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;</code>

在此程式碼中：

• 第一個陰影是內嵌框陰影，顏色較淺 (#dcffa6)，偏移量為 2px。
• 第二個陰影是陰影，顏色較深 (#000)，水平偏移 2 像素，垂直偏移 5 像素。

用逗號分隔這些陰影，您可以根據需要建立一個具有內部發光和外部陰影的按鈕。

以上是如何在 CSS 中的單一元素上建立多個框陰影？的詳細內容。更多資訊請關注PHP中文網其他相關文章！