在一个元素上加倍边框 - 纯css - 没有包装div

Question

我只想使用一个元素来实现以下效果，我想删除包装器div。

http://codepen.io/anon/pen/kdvex

通过使用插入阴影和边框，我几乎可以实现所需的效果。 但弯曲的边框看起来有点不对劲。 看看蓝色钻头的边缘，看看我的意思。

http://codepen.io/anon/pen/uLKjl

任何人都可以改进吗？ 它甚至可能吗？

Answer 1

我添加了一个用after伪元素模拟边框的元素。
http://codepen.io/anon/pen/FxemK

.btn.blue {
  z-index:2;
  position:relative
}

.btn.blue:after {content:"."; position: absolute; left:0; top:0; width:99.6%; height: 24px; background:none; z-index:1; border:2px solid white; 
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
-o-border-radius: 7px;
border-radius: 7px;}

第二个答案： http ： //codepen.io/anon/pen/FxemK

.btn.blue {
  z-index:2;
  position:relative; line-height:100%;
}  



    .btn.blue:after {content:"."; position: absolute; left:0; top:0; 
  width:99.6%; background:none; z-index:1; border:2.2px solid white; 
  line-height:133%; 
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;}

Answer 2

继Cadence96建议将伪选择器用于第二个边界：

http://codepen.io/anon/pen/zdcne