Question

好吧，我知道之前已经问过这个问题，但我有一种不同的CSS，效果也不同。我的CSS：

div.side-bar {
    text-align: right;
    width: 11%;
    margin-left: 88%;
    border-left: 1px solid #000;
    position: fixed;
    height: 88%;
    -webkit-box-shadow: -5px 0px 5px 0px #616161;
    box-shadow: -5px 0px 5px 0px #616161;
}

因此，使用下面的代码可以让我在左侧看到阴影，但它也会在顶部和底部都添加小阴影。如何只在左侧有阴影？

Answer 1

尝试通过添加如下所示的负展开半径来更改box-shadow属性：http://jsfiddle.net/vW8VS/3/

div.side-bar {
    text-align: right;
    width: 11%;
    margin-left: 88%;
    border-left: 1px solid #000;
    position: fixed;
    height: 88%;
    -webkit-box-shadow: -5px 0px 5px -3px #616161;
    box-shadow: -5px 0px 5px -3px #616161;
}

这应该让你把它推到一边而不用担心顶部和底部。

Answer 2

我发现在div的左侧获得了正确的盒子阴影效果只有我不得不用css来玩更多。使用以下样式，它们非常适合我想要实现的目标。

-webkit-box-shadow: -35px 0px 20px -35px #aaa;
box-shadow: -35px 0px 20px -35px #aaa;

box-shadow仅限于div的左侧

2 个答案: