仅CSS框阴影底部[重复]
Posted
技术标签:
【中文标题】仅CSS框阴影底部[重复]【英文标题】：CSS Box Shadow Bottom Only [duplicate] 【发布时间】：2011-06-01 11:00:03 【问题描述】：我该怎么做？我希望我的元素看起来好像有阴影下划线。我不想要其他 3 面的阴影。
【问题讨论】：
如果你有单色背景，也可以试试this method 【参考方案1】：您可以使用两个元素，一个在另一个内部，并给外部一个overflow: hidden 和等于内部元素的宽度以及底部填充，以便所有其他侧的阴影都被“切断”
#outer
width: 100px;
overflow: hidden;
padding-bottom: 10px;
#outer > div
width: 100px;
height: 100px;
background: orange;
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
或者，浮动外部元素以使其缩小到内部元素的大小。见：http://jsfiddle.net/QJPd5/1/
【讨论】：
如果您必须显示所有窗口大小的阴影，此解决方案非常棒。 这是一个更适合问题要求的解决方案。它确实跨越了元素的整个底部。而根据我的经验，正确答案显示的阴影比底部略短。【参考方案2】：这样做：
box-shadow: 0 4px 2px -2px gray;
实际上要简单得多，无论您将模糊设置为（第 3 个值），将散布（第 4 个值）设置为负值。
【讨论】：
这是迄今为止最好的方法。纯 css3，没有 hack。 以防万一有人想知道为什么会这样： * 第一个值将光源的 x 偏移设置为 0。 * 第二个值将光源的 y 偏移设置为 +4 . * 第三个值设置 2px 的模糊效果。 （使阴影不均匀）。 * 第四个值将点差设置为 -2px。 （将阴影收缩 2px。）这将导致阴影比您要阴影的元素小 4px，因此如果您只想要一个普通的下划线，请将最后一个值设置为 0。 在 Firefox 18.X 下它对我不起作用。对我有用的是：box-shadow: inset 0 -4px 3px black; 但它也会在侧面产生一点阴影.. :_(
但是它不适用于大（20px 或更多）阴影... :(
@ahnbizcad 并非完全随意。 0 不需要单位。因此，添加一个单元是多余的并且浪费空间。因此优选不添加单元。 然而：我经常添加一个单元来轻松更改对象检查器中的值...但这更多的是调试功能...我的猜测是大多数如果值为0，缩小器将丢弃该单位。【参考方案3】：
试试这个
-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
你可以在http://jsfiddle.net/wJ7qp/看到它
【讨论】：
20px0 20px 20px 对我来说很好【参考方案4】：
试试这个让你完全控制盒子阴影。
<html>
<head>
<style>
div
width:300px;
height:100px;
background-color:yellow;
box-shadow: 0 10px black inset,0 -10px red inset, -10px 0 blue inset, 10px 0 green inset;
</style>
</head>
<body>
<div>
</div>
</body>
</html>
这也适用于外框阴影。
【讨论】：
如何用这种技术获得模糊？以上是关于仅CSS框阴影底部[重复]的主要内容，如果未能解决你的问题，请参考以下文章