如何仅为<div>？</div>的一部分编码边框

Question

我希望实现这样的目标：

div周围的1-pixer边框和2像素边框，用于创建阴影效果的一侧。实现这一目标的最佳方法是什么？

Answer 1

为什么不使用box-shadow：

.content {
    border: 1px solid #000;
    box-shadow: 2px 2px 0 2px #ccc;
}

JS Fiddle demo

Answer 2

实现这一目标的最佳方法是使用两个div。一个边框设置为黑色四周 和第二个div部分接壤

像这样 DEMO

内部div：border:solid 1px #000;

外部div：border:solid 5px #BBB; border-top:none; border-left:none;

为了兼容性， box-shadow 在旧版浏览器中不起作用

Answer 3

我是这样做的。

div{
    border: 1px solid #000;
    -moz-box-shadow: 2px 2px 0 0 #000;
    -webkit-box-shadow: 2px 2px 0 0 #000;
    box-shadow: 2px 2px 0 0 #000;
}

这样你就可以拥有一个正在寻找的边框，并且盒子阴影向下和向右。

JS Fiddle

Answer 4

假设我理解正确，请尝试：

.content {
     border: 1px solid black; /* The border around the div. */
     border-right: 2px solid black; /* The borders where the shadow comes from. */
     border-bottom: 2px solid-black;

     /* and now the shadow */

     -moz-box-shadow: 2px 2px 0 0 #000;
     -webkit-box-shadow: 2px 2px 0 0 #000;
     box-shadow: 2px 2px 0 0 #000;
}