CSS Box Shadow仅限底部

这个问题在这里已经有了答案：

投影只有底部css3 10个答案

---

做这个：

box-shadow: 0 4px 2px -2px gray;

它实际上要简单得多，你将模糊设置为（第三个值），将扩展（第四个值）设置为负值。

---

你可以使用两个元素，一个在另一个内部，并给外部一个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/

---

尝试这个

-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/看到它

链接地址: http://www.djcxy.com/p/89037.html

上一篇: CSS Box Shadow Bottom Only

下一篇: XPointers in SVG