[分享]css3左边阴影消失

CSS3中有一种非常实用的效果——阴影，我们可以通过添加阴影让元素变得更加立体感和层次感。但是，在有些特定的情况下，我们希望展现的效果是左边不带阴影，只有右边和底部有阴影。这时，我们就需要使用CSS3...

CSS3中有一种非常实用的效果——阴影，我们可以通过添加阴影让元素变得更加立体感和层次感。但是，在有些特定的情况下，我们希望展现的效果是左边不带阴影，只有右边和底部有阴影。这时，我们就需要使用CSS3的一个小技巧——将左边的阴影设置为透明，使得左边看上去没有阴影。

.box{
    box-shadow: 10px 0px 5px -5px rgba(0,0,0,0.75), 0px 10px 5px -5px rgba(0,0,0,0.75); 
    /*前半部分是右边阴影，后半部分是底部阴影*/
} 

上面这段代码中，我们将阴影分别设置为了透明和半透明的黑色（rgba(0,0,0,0.75)），并分别指定了阴影的方向、大小和偏移量。前半部分是右边的阴影，由于设置了透明度，所以左边看上去没有阴影；后半部分是底部的阴影，与前半部分一起，形成了只有右边和底部有阴影的效果。

这种技巧可以在很多场景中使用，比如制作卡片、列表等，使得页面显示出更加立体感和层次感。不过需要注意的是，在使用过程中需要考虑兼容性，有些老的浏览器可能不支持该技巧。