0

我希望我的盒子看起来像这样，除了左侧是空白的：

.box{
    width: 190px;
    height: 90px;
    display: inline-block;
    padding: 5px;
    margin: 50px;
}

#box4sides{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 1px 1px #dbdbdb;
    -webkit-box-shadow: 0 0 1px 1px #DBDBDB;
    box-shadow: 0 0 1px 1px #DBDBDB;
    background: white;
    border: 1px solid #CDCDCC;
}

这是我最好的尝试：http: //jsfiddle.net/7dpUA/2/

我发现了其他 3 面盒子的例子，但它们的顶部或底部都被移除了，我无法将其转化为我的案例。

4

3 回答 3

2

我的建议是从您的 3 面框中删除该类shadow，并在您的 3 面框上添加这一点 css。

box-shadow: 1px 1px 1px 0 #DBDBDB, 1px -1px 1px 0 #DBDBDB;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;

box-shadow 属性的解释：
box-shadow: 1 2 3 4 color;

  1. 水平偏移 - 正值向右移动阴影，负值向左移动。
  2. 垂直偏移 - 正值向下移动阴影，负值向上移动。
  3. 模糊半径 - 值越大，越模糊。
  4. 传播距离 - 正值扩展阴影，负值收缩。

颜色是不言自明的。这是您编辑的 jsFiddle 以显示您想要的内容。

就影子而言，你也不再需要position: relative;了。

于 2012-09-05T20:52:08.090 回答
0

这是你要找的吗？为了强调，我夸大了边框等，并增加了阴影元素的第一个参数以将其向右扔一点，避免“假边框”效果。

于 2012-09-05T20:55:15.780 回答
0

在盒子周围创建一个包装 div，溢出为隐藏，并为#box4sides div提供负边距。

检查这个 jsFiddle：http: //jsfiddle.net/7dpUA/22/

这是你需要的吗？

于 2012-09-05T22:17:27.550 回答