0

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

这可以用css实现吗？

在此处输入图像描述

CSS：

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

5 回答 5

2

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

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

IE..

.border {
box-shadow: 0 5px 0 0 #000;
-moz-box-shadow: 0 5px 0 0 #000;
-webkit-box-shadow: 0 5px 0 0 #000;
}
于 2012-10-03T18:56:59.707 回答
1

您可以使用 CSS3 box-shadow。这里有一个不错的小游乐场供你涂鸦。

请记住，这里的浏览器支持不是特别强。

于 2012-10-03T18:45:47.760 回答
0

使用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;
}
于 2012-10-03T18:45:47.733 回答
0 
<div id="container"></div>​

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

这里的例子

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

于 2012-10-03T18:51:40.283 回答
0 
.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>​
于 2012-10-03T18:59:41.530 回答