Question

我有以下box-shadow插入css3样式：

box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);

插图样式出现在包装盒的所有4个侧面上，但我不想在顶部设置样式。如何从顶部删除样式，但保持左，下，右的样式？

由于

Answer 1

这就是你想要的：

.right-left-bottom-shadow {
    box-shadow: 5px 0 5px -5px #CCC, 0 5px 5px -5px #CCC, -5px 0 5px -5px #CCC;
}

第一个是左侧，第二个是底部，最后一个是右侧的阴影。如果您的边框颜色为#CCC，这看起来非常好。

Answer 2

到目前为止，您不能只使用box-shadow这样做，但您可以将box-shadow与overflow: hidden之类的其他可能性进行合并。例如，您可以将顶部阴影推到父元素之外，并使用overflow: hidden隐藏该部分。

请参阅此演示：http://jsfiddle.net/CatChen/Fty2N/3/

Answer 3

我知道没有CSS方法，但以下可能是一种解决方法（不是一个完美的解决方案）

    <div id="mydiv">
       <div class="workaround"></div>
    </div>

CSS

   #mydiv { 
     background-color:#f00;
     height:100px;
     width:100px;
     box-shadow: inset 0 0 10px 0 rgba(255, 255, 255, 1);
     padding:0 2px;
  }
 #mydiv .workaround {
    background-color:#f00;
    width:100%;
    height:10px;
 }

检查小提琴http://jsfiddle.net/bZF48/17/

如何在左，下，右 - 不是顶部插入阴影？

3 个答案: