溫馨提示×

box-shadow如何實現(xiàn)內(nèi)陰影

小樊
379
2024-06-18 10:14:58
欄目: 編程語言

要實現(xiàn)內(nèi)陰影效果，可以使用box-shadow屬性并設(shè)置inset關(guān)鍵字來指定陰影為內(nèi)陰影。以下是一個示例代碼：

.shadow {
  width: 200px;
  height: 200px;
  background-color: #f1f1f1;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, 0.5);
}

在這個示例中，inset關(guān)鍵字告訴瀏覽器這是一個內(nèi)陰影。其后的四個值分別表示陰影的水平偏移量、垂直偏移量、模糊半徑和擴散半徑。最后一個值是顏色，使用rgba格式指定顏色和透明度。這樣就可以實現(xiàn)一個內(nèi)陰影效果。

0 踩