Question

你想尝试在所有方面获得投影，但是在顶部，下拉子菜单在这个网站上发现了这个代码，它的所有方面都有阴影但不是底部

body {
     width: 300px;
     height: 200px;
     margin: 20px auto;

 -webkit-box-shadow: 0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 -moz-box-shadow:    0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999;
 box-shadow:         0 -3px 3px -3px #999, 3px 0px 3px -3px #999, -3px 0px 3px -3px #999
 }

我如何改变为所有方面的阴影但顶部？一直试着小提琴，但为了我的生活不能理解上面的代码从上到下改变它的影子
http://jsfiddle.net/PuKDb/

需要它像这一样 http://jsfiddle.net/leaverou/8tgAp/
而不是红线从上面的阴影...

我是一个剪切和粘贴的编码器，所以任何帮助都会被淹没！

Answer 1

body {
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;
box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

没有解释，因为你显然对其工作原理没有兴趣，只是它确实如此;）

Answer 2

可能作者永远不会再次访问这个主题，但我发现正确的定义是由两个声明而不是3：

box-shadow: 3px 5px 8px -1px rgba( 15, 15, 15, .8 ), -3px 5px 8px -1px rgba( 15, 15, 15, .8 );

很难解释，但是如果你定义了两种主要颜色，你会在底部阴影中看到原因：

box-shadow: 3px 3px 8px -1px red, -3px 3px 8px -1px yellow;

存在非零整数作为第一个值会混合两种颜色，从而生成一个新颜色。

关键是，定义三个声明，其中一个将覆盖其中一个声明（取决于参数），从而产生更暗的阴影。

同样适用于垂直偏移。如果两者相同（此处由5px表示），则会在底部阴影中发生另一个叠加，如果为正，或者在顶部阴影中，如果为负（这不是主题的情况）。

我希望它可以帮助其他人。

Answer 3

这应该对你有用

body 
{
    width: 300px;
    height: 200px;
    margin: 20px auto;

-webkit-box-shadow: 3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

-moz-box-shadow:    3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999;

box-shadow:         3px 3px 3px -3px #999, 3px 3px 3px -3px #999, -3px 3px 3px -3px #999
}

Answer 4

.div {
    -webkit-box-shadow: 0 3px 3px -3px #c00;
    -moz-box-shadow:    0 3px 3px -3px #c00;
    box-shadow:         0 3px 3px -3px #c00;
}

根据大小和模糊更改第二组数字。

css阴影四周但顶部

4 个答案: