CSS 清除投影的三種方法

CSS中的投影效果可以為元素添加深度和立體感，但有時(shí)候我們可能需要清除或移除這些投影效果，下面將介紹三種清除CSS投影的方法。

1、使用box-shadow屬性

CSS的box-shadow屬性用于添加投影效果，其語(yǔ)法為：

box-shadow: horizontal_offset vertical_offset blur_radius color;

horizontal_offset和vertical_offset表示投影的水平和垂直距離，blur_radius表示投影的模糊半徑，color表示投影的顏色，要清除投影，可以將box-shadow屬性的值設(shè)置為none：

box-shadow: none;

2、使用filter屬性

CSS的filter屬性可以用于應(yīng)用一系列圖像操作，包括清除投影，可以通過(guò)設(shè)置filter屬性的值為drop-shadow(0 0 0 rgba(0, 0, 0, 0))來(lái)清除投影：

filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0));

3、使用SVG

SVG可以用于創(chuàng)建矢量圖形，并且可以通過(guò)設(shè)置filter屬性來(lái)清除投影，可以通過(guò)在SVG元素上設(shè)置filter: url(#dropshadow)來(lái)應(yīng)用一個(gè)清除投影的濾鏡：

<svg height="100" width="100">
  <defs>
    <filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow color="black" dx="0" dy="0" stdDeviation="0"/>
    </filter>
  </defs>
  <rect width="100" height="100" fill="white" filter="url(#dropshadow)"/>
</svg>

是三種清除CSS投影的方法，可以根據(jù)具體的需求選擇適合的方法。