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

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(如果它们是内嵌元素)以允许边距生效.