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

Question

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

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

嵌入式造型出现在盒子的所有四个侧面上,但我不想在顶部设计样式.如何从顶部删除样式,但保持左,下,右的样式？

谢谢

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

我不知道这方面的 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/