如何获得左上角的框阴影只有右边 [英] How to get box-shadow on left & right sides only

问题描述

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

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

但它给了阴影。

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

---

你可以接近多个箱阴影;

  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/

编辑

添加2

  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/

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.

解决方案

NOTE: I suggest checking out @Hamish's answer below; it doesn't involve the imperfect "masking" in the solution described here.

---

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/

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