对一个元素的双重边框 - 纯CSS - 没有包装div

Question

我试图用只有一个元素来实现下面的效果，我想去掉包装div。

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

我已经几乎acheive通过使用插图阴影和边框预期的效果。但是弯曲的边框看起来有点不对。看看蓝色的边缘，看看我的意思。

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

任何人都可以在这个改进？它甚至有可能吗？

Answer 1

使用伪选择第二个边界Cadence96的建议跟进：

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

Answer 2

我添加了一个模拟伪元素后边框的元素。
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;}