像萤火虫检查元素的边框颜色

Question

当您尝试检查网页中的DOM元素时，我想重现firebug生成的边框颜色。

它看起来像下图中文本“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属性的绝佳资源。