css - CSS3 - 垂直角度 80% 外框阴影

Question

我知道如何让盒子阴影沿着元素向下延伸但是是否可以让它向下延伸 80% 的元素而不是元素的整个高度？

还有如何使阴影角度消失（这是我最挣扎的事情）

Answer 1

像这样的东西？

jsFiddle在这里

有很多方法可以实现这一点。我只是设置了阴影，并覆盖了一个三角形。

这是没有模糊阴影的替代方案.. http://jsfiddle.net/bHEaZ/1/

HTML - 非常简单

<div></div>

CSS

div {
    width: 100px;
    height: 200px;
    position: relative;
    border: 1px solid black;
    box-shadow: 20px -10px 30px black;
    margin: 40px;
}

div:after {
    position: absolute;
    left: 102px;
    top: 100px;
    content: "\A";
    width: 0;
    height: 0;
    border-bottom: 90px solid white;
    border-right: 50px solid white;
    border-top: 90px solid transparent;
}

Answer 2

你在寻找这样的东西吗？
http://fiddle.jshell.net/sijav/2S7Pv/1/
有很多方法可以做到这一点，但我的方法是：
使用另一个 div 和半径边框，然后将其放在实际 div 后面...

.origdiv{
    width:200px;
    height:200px;
    background: blue;
    z-index:10;
}
.shadowthis{
    left:150px;
    top:150px;
    position:absolute;
    box-shadow: 10px -10px 5px #888888;
    border-bottom-right-radius:25%;
    z-index:9;
}

希望能帮助到你