锚定标记上的两层边框：活动状态

Question

在Gmail中，当我单击撰写按钮时，将鼠标移开而不放开鼠标按钮，我可以看到这种优雅的双层边框：

这种效果如何完成？我可以将这个效果应用到锚标签吗？

Answer 1

是的，你可以简单地使用border-style: double：

a { 
    color: #fff; 
    background-color: #f00; 
    font-weight: bold; 
    border: 6px double #fff; 
    padding: 0.4em 1em; 
}​ 

JS Fiddle demo。

border-color这里是#fff，它出现在背景颜色片段的“之内”或之间。

如果你想获得更有趣，并且有“最外层的边界”是一个不同颜色的background-color，那么你也可以使用box-shadow（或供应商前缀的变体）来：

a { 
    text-decoration: none; 
    color: #fff; 
    background-color: #f00; 
    font-weight: bold; 
    border: 3px solid #fff; 
    padding: 0.4em 1em; 
    box-shadow: 0 0 0 4px #f90; 
}​ 

JS Fiddle demo。

这将水平放置零单位的影子，垂直放置零单位，模糊零单位和4px的差值。

box-shadow方法当然允许将multiple different colours添加到元素的外部方面。不幸的是，box-shadow解决方案并没有取代影子中的元素，实际上是“无形的”。因此，您可能必须考虑阴影的宽度，并将相关边距与display: inline-block（如果它们是内联元素）一起应用到元素元素以允许边距生效。

Answer 2

http://jsfiddle.net/calder12/PfuJn/1/

a{color:white;font-family:sans-serif;font-weight:bold;text-align:center;display:block;} 
.aContainer{width:80px;padding:15px;background-color:orange;border: 6px double white;} 


<div class="aContainer"> 
<a href="#">Compose</a> 
</div>​ 

Answer 3

两种这些方法工作，这是一种替代解决方案。看起来是什么Gmail使用过：

jsfiddle

a { 
    color: #fff; 
    background-color: #f00; 
    padding: 10px; 
    box-shadow: 0 0 0 1px #FFFFFF inset; 
    border: 1px solid #f00; 
}