Question

我有一个主要内容div与属性;

box-shadow: inset -15px 0 15px -15px;

我希望这样做，以便div在每一侧都有相同的盒子阴影，但我不知道如何做到这一点。这是JSFiddle Demo。

HTML：

<div id="content"></div>

CSS：

#content {
    width: 100px;
    height: 100px;
    background-color: #999999;
    position: absolute;
    left: 10px;
    top: 10px;
    box-shadow: inset -15px 0 15px -15px;
}

Answer 1

试试这个 box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;

Answer 2

这很简单，根据W3SCHOOLS box-shadow的synstax是

box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;

您可以使用插入或任何其他属性替换所需的阴影类型。 h-shadow用于水平（左和右），v-shadow用于垂直（向上和底部），模糊是你想要它的锐度，而传播距离你想要它的每一边有多远是的，也要记住这些值是用px指定的，最后是颜色。

这是一个例子：

box-shadow: inset 0px 0px 5px 10px #888;

Answer 3

稍微修改原始CSS代码以添加左右阴影：

#content {
    width: 100px;
    height: 100px;
    background-color: #999999;
    position: absolute;
    left: 10px;
    top: 10px;
    box-shadow: inset -15px 0 15px -15px, inset 15px 0 15px -15px;
}

Answer 4

已经回答here

-webkit-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
                    inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
-moz-box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
                 inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);
box-shadow: inset 25px 0px 25px -25px rgba(0, 0, 0, 0.45), 
            inset -25px 0px 25px -25px rgba(0, 0, 0, 0.45);

这是jsfiddle

Answer 5

试试这个

box-shadow: inset 0px 0px 5px 10px #8888;

Demo

双面盒子阴影

5 个答案: