一个元素上的双边框 - 纯 css - 没有包装 div答案

【问题标题】：Double borders on one element - pure css - no wrapping div一个元素上的双边框 - 纯 css - 没有包装 div
【发布时间】：2013-02-05 14:49:53
【问题描述】：

我正在尝试仅使用一个元素来实现以下效果，我想删除包装器 div。

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

通过使用嵌入的阴影和边框，我几乎达到了预期的效果。但是弯曲的边框看起来有点不对劲。看看蓝色位的边缘，看看我的意思。

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

有人可以改进吗？有没有可能？

【问题讨论】：

在我看来和 ff 一样。不适用于 chrome

标签： html css

【解决方案1】：

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

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

【讨论】：

【解决方案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;}

【讨论】：

差不多了，不幸的是它需要可变高度，因为字体大小可能会改变。
然后移除高度并使用锚点的行高和 :after 伪元素。 codepen.io/anon/pen/FxemK 我给了锚 100% 的行高，锚 :after 的行高更大，为 133%。