我如何使CSS的透明边框?

我有一个li风格如下:

 li{ display:inline-block; padding:5px; border:1px solid none; } li:hover{ border:1px solid #FC0; } 

当我徘徊在li的边界上,没有让li的转移。 是否有可能有一个不可见的“边界”?

您可以使用“透明”作为颜色。 在IE的某些版本中,这个版本是黑色的,但自IE6以来我没有testing过。

http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php

您可以删除边框并增加填充:

  li{ display:inline-block; padding:6px; border-width:0px; } li:hover{ border:1px solid #FC0; padding:5px; } 
 <ul> <li>Hovering is great</li> </ul> 

你们中的许多人必须在这里登陆才能find一个不透明边界的解决scheme,而不是一个透明的边界。 在这种情况下,您可以使用rgba ,其中a代表alpha

 .your_class { height: 100px; width: 100px; margin: 100px; border: 10px solid rgba(255,255,255,.5); } 

演示

在这里,你可以从0-1改变borderopacity


如果你只是想要一个完整的透明边框,最好使用的是transparent ,比如border: 1px solid transparent;

嘿,这是我经历过的最好的解决scheme..这是CSS3

使用下面的属性你的div或任何你想把边界透明

例如

 div_class { border: 10px solid #999; background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */ } 

这将工作..

既然你在评论中说,你有更多的select,更好,这是另一个。

在CSS3中,有两种不同的所谓的“盒子模型”。 一个将边框和填充添加到块元素的宽度,而另一个没有。 你可以通过指定来使用后者

 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; 

那么,在现代浏览器中,元素将始终具有相同的宽度。 也就是说,如果在hover时对其应用边框,边框的宽度将不会添加到元素的整个宽度; 边界将被添加到元素内部,可以这么说。 但是,如果我没有记错的话,你必须明确指定width才能工作。 在这种情况下,这可能不是您的select,但您可以在将来的情况下记住它。

是的,你可以使用border: 1px solid transparent

另一个解决scheme是使用outlinehover(并将边框设置为0),这不会影响文档stream:

 li{ display:inline-block; padding:5px; border:0; } li:hover{ outline:1px solid #FC0; } 

NB。 您只能将轮廓设置为sharthand属性,而不是单个侧面。 这只是用于debugging,但它很好地工作。

这个博客条目有一个模拟border-color: transparent在IE6中是border-color: transparent的。 以下示例包含博客条目注释中提到的“hasLayout”修复程序:

 /* transparent border */ .testDiv { width: 200px; height: 200px; border: solid 10px transparent; } /* IE6 fix */ *html .testDiv { zoom: 1; border-color: #FEFEFE; filter: chroma(color=#FEFEFE); } 

确保IE6修补程序中使用的border-color不在.testDiv元素中的任何位置使用。 我把这个例子从pink改成了#FEFEFE因为这看起来更不可能被使用。

最简单的解决方法是使用rgba作为颜色: border-color: rgba(0,0,0,0); 这是完全透明的边框颜色。

Interesting Posts