html - 如何仅对部分的边框进行编码?

Question

我想实现这样的目标：

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

Answer 1

为什么不使用box-shadow：

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

JS 小提琴演示。

Answer 2

这就是我的做法。

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小提琴

Answer 3

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

像这样 DEMO

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

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

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

Answer 4

Assuming I understood correctly, try:

.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;
}