1

我目前正在做一个设计，其中设计师在 div 上使用了阴影。由于我不喜欢在这类事情上使用图像，所以我决定将我的 CSS 技能提升到一个新的水平。我对 CSS3 完全陌生，但我想尝试使用 box-shadow。我一直在阅读这个新功能，但我似乎无法让我的确切设计工作。

这就是我正在寻找的：

在此处输入图像描述

顶部：1px；右：5px；底部：9px；左：5px

设计师为阴影使用了不同的传播（嗯，我相信在这种情况下它被称为传播）。我的问题是我无法在 div 的每侧使用不同的点差来实现这个工作，有人可以帮助我吗？

提前致谢。

div {
    box-shadow: 0px 0px 5px #000;
}
4

3 回答 3

2

box-shadow 的目的是为您分配给它的 div 创建一个阴影。您不能使特定的左上右下部分更大或更小

见：http ://css3gen.com/box-shadow/

可以做到这一点的唯一方法是摆弄变量

例如：

box-shadow: 0px 9px 15px 5px #888888;

这个 box-shadow 将生成一个 box-shadow ..

  • [0px] 不向左或向右移动
  • [9px] 向下 9px
  • [15px] 有 15px 的模糊（玩弄它以获得所需的效果）
  • [5px] 是 5px 宽（在所有边上）
  • [#888888] 有灰色

另一种方法是使用边框图像。

于 2012-11-06T20:25:54.103 回答
0

这非常接近：http: //jsfiddle.net/EG6FA/

div {
    ...
    box-shadow: 0px 4px 10px #777;
}​
于 2012-11-06T23:50:42.453 回答
0 
-webkit-box-shadow: 0px 0px 10px 5px #888888;
-moz-box-shadow: 0px 0px 10px 5px #888888;
box-shadow: 0px 0px 10px 5px #888888;

（IE9 和 IE10 将呈现较小的 box-shadow。早期的 Explorer 版本将不显示阴影。）

于 2012-11-30T01:19:56.807 回答