Question

这是css代码

    .one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;    
    -webkit-box-shadow: 0 8px 6px -6px black;
    -moz-box-shadow: 0 8px 6px -6px black;
    box-shadow: 0 8px 6px -6px black;
                      }

使用此样式，正如我在this fiddle example中所示，阴影位于框的底部我想把阴影放在盒子的左右两侧实际上，我在CSS中有点弱:) 谢谢！

Answer 1

您必须了解box-shadow的参数以及投影的工作原理（灯如何工作）。

为了做你想做的事，你需要两个不同的阴影，因为一个光源不可能在两侧投射阴影（如果它在盒子的前面，它可能会在你周围的阴影周围蔓延）下边缘也是。）

以下是快速回答：

 box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;

Updated fiddle

这里发生的是你投射了一个向右和向左偏移10px的阴影（第一个参数offset-x）。只有这样才能达到你想要的效果，然而，你会有一个块状阴影（example）。

由于您希望事情变得有点模糊，您必须添加第三个参数（blur-radius）。一旦你这样做，你会看到从上方和下方的盒子后面爬出的模糊：这是因为在你的盒子后面实际上有另一个相同大小的盒子，但是它很模糊。

要避免这种情况，请使用带有负值的第四个参数（spread-radius）来有效地剪裁框后面的投影框的大小，以便隐藏顶部和底部阴影。

Answer 2

嗨Zey这是你的CSS中的代码粘贴，你会得到你想要的。

这是CSS

.one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;    
    -webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    -moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
                 }

这是HTML

<div  class="one-edge-shadow"></div>

并在小提琴http://jsfiddle.net/MfV2Y/

中查看

Answer 3

试试这个：

.one-edge-shadow {
    width:200px;
    height:200px;
     border-style: solid; 
    border-width: 1px;
    -webkit-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    -moz-box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
    box-shadow: 10px 0 10px -6px black, -10px 0 10px -6px black;
}

在css中向左和向右的框阴影

3 个答案: