CSS實(shí)現(xiàn)陰影的幾種方法

在CSS中，有多種方式可以實(shí)現(xiàn)陰影效果，以下是一些常見的方法：

1、使用box-shadow屬性

box-shadow屬性是CSS3中新增的一個(gè)屬性，用于在元素周圍添加陰影，該屬性接受多個(gè)參數(shù)，包括陰影的水平偏移、垂直偏移、模糊半徑和顏色等，以下代碼將在元素周圍添加一個(gè)藍(lán)色的陰影：

div {
  box-shadow: 10px 10px 5px blue;
}

2、使用text-shadow屬性

text-shadow屬性用于在文本周圍添加陰影，適用于給文本增加一些視覺上的焦點(diǎn)，以下代碼將在文本周圍添加一個(gè)灰色的陰影：

p {
  text-shadow: 2px 2px 4px gray;
}

3、使用filter屬性

filter屬性是CSS6中新增的一個(gè)屬性，可以用于對(duì)元素進(jìn)行各種視覺處理，包括添加陰影，以下代碼將在元素周圍添加一個(gè)藍(lán)色的陰影：

div {
  filter: drop-shadow(10px 10px 5px blue);
}

需要注意的是，使用filter屬性需要瀏覽器支持CSS6，因此可能在一些較舊的瀏覽器上無法正常工作。

除了以上三種方法，還有其他一些實(shí)現(xiàn)陰影效果的方式，例如使用SVG濾鏡等，具體使用哪種方法取決于你的需求和所使用的技術(shù)棧。