如何获得左边和右边的框阴影只有右边

问题描述

以任何方式获得左边的盒子阴影&右（水平？）边只有没有黑客或图像。我使用：

  box-shadow：0 0 15px 5px rgba（31，73，125，0.8）; 
  

但它给了阴影。

我建议您查看下面的;它不涉及这里描述的解决方案中的不完美的掩蔽。

---

你可以靠近多个箱阴影;

  box-shadow：12px 0 15px -4px rgba（31，73，125，0.8），-12px 0 8px -4px rgba（31，73，125，0.8）; 
  

编辑

为顶部和底部向前添加2个以上的阴影，以掩盖渗出的部分。

  shadow：0 9px 0px 0px white，0 -9px 0px 0px white，12px 0 15px -4px rgba（31，73，125，0.8），-12px 0 15px -4px rgba（31，73，125，0.8）; 
  

Any way to get box-shadow on left & right (horizontal?) sides only with no hacks or images. I am using:

box-shadow: 0 0 15px 5px rgba(31, 73, 125, 0.8);

But it gives shadow all around.

I have no borders around the elements.

解决方案

---

You can get close with multiple box-shadows; one for each side

box-shadow: 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 8px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/YJDdp/

Edit

Add 2 more box-shadows for the top and bottom up front to mask out the that bleeds through.

box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(31, 73, 125, 0.8), -12px 0 15px -4px rgba(31, 73, 125, 0.8);

http://jsfiddle.net/LE6Lz/

这篇关于如何获得左边和右边的框阴影只有右边的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！