html - 锚标签上的两层边框：活动状态

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 小提琴演示。

这里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 小提琴演示。

这会将阴影水平位移零个单位，垂直位移零个单位，具有零个单位的模糊和4px.

box-shadow当然，这种方法允许将多种不同的颜色添加到元素的外部。但不幸的是，该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>​