[分享]css3投影怎么去掉上边的

CSS3有一个非常常用的样式属性，就是投影（Box Shadow）。不过，有时候我们会希望投影只在元素的左、右、下边框上出现，而不在上边框上出现。这时候怎么办呢？本篇文章将为大家介绍如何去掉CSS3投...

CSS3有一个非常常用的样式属性，就是投影（Box Shadow）。不过，有时候我们会希望投影只在元素的左、右、下边框上出现，而不在上边框上出现。这时候怎么办呢？本篇文章将为大家介绍如何去掉CSS3投影上边的影响。

.box {
  box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5);
} 

上面的代码会在元素的四个边框上都添加投影，也就是说上边框也会有投影的影响。如果我们想要去掉上边框的影响，只需要对上边框设置一个负值的投影即可：

.box {
  box-shadow: 0px 10px 10px -10px rgba(0,0,0,0.5),
              0px -10px 10px -10px rgba(0,0,0,0.5);
} 

上面的代码中，我们为上边框设置了一个负值的投影，其余边框依然使用原来的正值投影。也就是说，上边框的投影和下边框、左边框、右边框的投影正好相反，这样就达到了去掉上边框影响的目的。

总的来说，通过设置负值的投影，我们可以轻松去掉CSS3投影的上边框影响。这个技巧在实际开发中非常实用，可以让我们更加轻松地实现各种漂亮的设计效果。