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

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解决方案并没有取代影子元素，实际上是“无形的”。因此，您可能必须考虑阴影的宽度并将相关边距应用于a元素元素以及display: inline-block（如果它们是内嵌元素）以允许利润率生效。

Answer 2

这两种方法都有效，这是另一种解决方案。看起来这也是Gmail使用的内容：

jsfiddle

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

Answer 3

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>​