如何在左侧，底部，右侧 - 而不是顶部的框阴影插图？答案

【问题标题】：How to box-shadow inset on just the Left, Bottom, Right -- not the top?如何在左侧，底部，右侧 - 而不是顶部的框阴影插图？
【发布时间】：2011-11-24 02:03:46
【问题描述】：

我有以下 box-shadow inset css3 样式：

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

插入样式出现在盒子的所有 4 个侧面，但我不想在顶部设置样式。如何从顶部删除样式但保留左侧、底部、右侧的样式？

谢谢

【问题讨论】：

CSS3 box-shadow, all sides but one?的可能重复
@Clive，我看到与imo无关

标签： html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

到目前为止，您无法仅使用 box-shadow 来做到这一点，但您可以将 box-shadow 与其他可能性（例如 overflow: hidden）组合在一起。例如，您可以将顶部阴影推到父元素之外并使用overflow: hidden 隐藏该部分。

查看此演示：http://jsfiddle.net/CatChen/Fty2N/3/

【讨论】：

【解决方案3】：

这就是你想要的：

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

第一个是左边，第二个是底部，最后一个是右侧的阴影。如果你的边框有颜色#CCC，这看起来真的很好。

【讨论】：

我确认这在所有主流浏览器 (IE 9+) 上都有效并受支持。