html - 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%);

但是!这会产生这个:

它在底部和右侧有一个 2px 的边框，而不是 1px，这是由于框阴影的性质，有效地将顶部和左侧的 1 个像素添加到另一侧。大纲不行，因为它一直都在。有什么方法可以在右侧和底部将其裁剪 1px？

Answer 1

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

不管你的标题是什么，我都使用了盒子阴影来实现你想要的效果。由于您已经尝试过 box-shadow，我认为您并不完全反对它，只是您自己的实现不太顺利。如果我的假设不正确，我深表歉意。

这是 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;
}