我可以通过CSS实现这一目标吗？

Question

我正在尝试在边框右侧添加一个小的阴影，类似于下图。

这可以用css实现吗？

CSS：

.border {
    border-right: solid 1px #ddd;
}

Answer 1

是的，您可以尝试使用-moz-box-shadow功能，但我不知道这些功能是否与跨浏览器兼容。 box-shadow是确保其与浏览器兼容的另一种方式（以及-webkit-box-shadow）。为了安全起见，我通常都会使用它们。

有关如何使用它们的详细信息，请查看http://www.css3.info/preview/box-shadow/

即..

.border {
box-shadow: 0 5px 0 0 #000;
-moz-box-shadow: 0 5px 0 0 #000;
-webkit-box-shadow: 0 5px 0 0 #000;
}

Answer 2

您可以使用CSS3 box-shadow。 Here's a nice little playground for you to doodle in.

请记住，browser support isn't particularly strong here。

Answer 3

使用box-shadow CSS3属性。

#Example_H {
  -moz-box-shadow: inset -5px -5px 5px #888;
  -webkit-box-shadow: inset -5px -5px 5px #888;
  box-shadow: inset -5px -5px 5px #888;
}

Answer 4

<div id="container"></div>​

#container{
    background: #e9e9e9;
    height: 200px;
    width: 50px;
    box-shadow: -5px 0 5px #888;
    margin: 20px 0 0 20px;
}​

Example here

正如其他人已经提到的，这在Chrome / FF中可以正常工作，但在IE中不太可能。

Answer 5

.sidebar{
    width:200px;
    height:500px;
    background:#F0F0F0;
   -webkit-box-shadow: inset 8px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: inset 8px 0px 10px 0px rgba(0, 0, 0, 0.2);
}​

<div class="sidebar">

</div>​