我如何使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改变border的opacity

如果你只是想要一个完整的透明边框，最好使用的是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