錨定標記上的兩層邊框：活動狀態

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; 
}