像螢火蟲檢查元素的邊框顏色

Question

我想重現當您嘗試檢查網頁中的DOM元素時由螢火蟲所做的邊框顏色。

它看起來像下圖中文字「Link2」的邊框。

圍繞文本「鏈接」的邊界就是我所做的。代碼可以從這個鏈接看到。 jsfiddle。

有人可以幫助我編寫CSS代碼來重現Link2的邊框嗎？

感謝

Answer 1

你需要使用箱陰影，就像這樣：

http://jsfiddle.net/GolezTrol/AEDsY/

.cl3 { 
    -webkit-box-shadow: 0 0 3px 3px lightblue; 
    -moz-box-shadow: 0 0 3px 3px lightblue; 
    box-shadow: 0 0 3px 3px lightblue; 
} 

Answer 2

，從效果使用box-shadow CSS屬性來實現的。

要獲得儘可能多的支持，請使用-moz-box-shadow,-webkit-box-shadow和box-shadow。

爲了得到你想要的效果，使用方法：

-moz-box-shadow: 0 0 5px 2px blue; 
-webkit-box-shadow: 0 0 5px 2px blue; 
box-shadow: 0 0 5px 2px blue; 

Answer 3

你會使用這樣的：

-webkit-box-shadow: 0px 0px 3px blue; /* Saf3-4 */ 
-moz-box-shadow: 0px 0px 3px blue; /* FF3.5 - 3.6 */ 
box-shadow: 0px 0px 3px blue; /* Opera 10.5, IE9, FF4+, Chrome 10+ */ 

退房http://css3please.com/ - 這是與新的CSS屬性發揮着巨大的資源。