CSS双边框，第二个边框一直到元素的顶部

Question

我想在css中重新创建它：

如您所见，它可以像这样轻松完成：

border-top: 1px solid #E2E2E2;
border-left: 1px solid #E2E2E2;
border-bottom: 1px solid #848484;
border-right: 1px solid #848484;

然后我们补充说：

box-shadow: 0.7px 0.7px 0 0.7px hsl(0, 0%, 0%);

但是！这产生了这个：

由于box-shadow的性质有效地将顶部和左侧1像素添加到另一侧，因此底部和右侧有2pxborder，而不是1px。大纲不会发生，因为这一切都在发生。有没有什么方法可以在右边和底部以1px裁剪出来？

Answer 1

这是一个JSBin演示：http://jsbin.com/reqev/1/edit?html,css,output

尽管有你的头衔，我还是使用了一个盒子阴影来达到你想要的效果。既然你已经尝试了盒子阴影，我认为你并没有完全反对它，并且对你自己的实现没有好运。如果我的假设不正确，我道歉。

这里是CSS：

body {
  background: white;
}
button {
  border-right:  1px solid black;
  border-bottom: 1px solid black;
  border-top:    none;
  border-left:   none;
  background:    #ddd;
  box-shadow:    inset 1px 1px #e2e2e2,
                 inset -1px -1px #848484;
  padding:       5px 20px;
}

Answer 2

您可以使用两个元素而不是一个元素来执行此操作：

<div id="x"><div id="z">Button</div></div>

CSS

#x {
    border-top: 1px solid #E2E2E2;
    border-left: 1px solid #E2E2E2;
    border-bottom: 1px solid #000000;
    border-right: 1px solid #000000;
    background-color: #ddd;
    display: inline-block;
    cursor: pointer;
}
#z {
    padding: 5px 10px;
    border-bottom: 1px solid #838383;
    border-right: 1px solid #838383;
}

这是一个小提琴：http://jsfiddle.net/28z9mo8w/3/

Answer 3

我认为这仍然可以通过使用box-shadow但设置插入

来实现

所以E2E2E2变成了一个左上边框，00000变成了一个右下边界，而848484变成了一个225度的插入阴影

请参阅此代码

https://github.com/necolas/css3-facebook-buttons