Question

我有这个设计：

http://img526.imageshack.us/img526/1363/desginer.jpg

我正在尝试使用以下方法获得最佳效果：

        div.image {
            -moz-box-shadow: 0 0 1px 1px #bbb;
            -webkit-box-shadow: 0 0 1px 1px #bbb;
            box-shadow: 0 0 1px 1px #bbb;
            padding: 2px;
            width: 120px;
            height: 120px;
        }

<div class="image"><img width="120" height="120" src="image.jpg" title="title" alt="alt" /></div>

但是我尝试了很多价值观，但我仍然不确定什么是最好的。有什么提示吗？

Answer 1

这样做你想要的;没有第三个值，在第4个http://jsfiddle.net/jalbertbowdenii/LAT5B/

上多一点

Answer 2

http://www.css3.info/preview/box-shadow/

从页面：

语法：
  box-shadow：none | ＆LT;影子＆gt; [，＆lt;影子＆gt; *
  ＆LT;影子＆gt; =插入？＆安培;＆安培; [＆lt;长度＆gt; {2,4}＆amp;＆amp; ＆LT;颜色＆gt;？ ]

因此，第一个值可以是X（左）和Y（顶部）位置，第三个值是模糊spred，fouth是颜色。

您还可以在开头指定inset以创建内部阴影。

在您的情况下，您必须将顶部和左侧偏移归零并相应地定义模糊半径：

div.image {
    ...
    -moz-box-shadow: 0 0 5px #bbb;
    -webkit-box-shadow: 0 0 5px #bbb;
    box-shadow: 0 0 5px #bbb;
}

Answer 3

对我而言，完美的价值观： http://jsfiddle.net/D2LVq/1/

Answer 4

我最接近您样品的阴影是：0 0 8px #666

框阴影匹配设计

4 个答案: