html - アンカー タグの 2 層の境界線:アクティブな状態

Question

Gmail で、作成ボタンをクリックし、マウス ボタンを離さずにマウスを離すと、このようなエレガントな 2 段の境界線が表示されます。

この効果はどのように行われていますか？この効果をアンカー タグに適用できますか?

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 フィドルのデモ。

これにより、影が水平方向に 0 単位、垂直方向に 0 単位だけ移動し、0 単位のぼかしと の広がりがあり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>​