如何使用CSS制作透明边框？

我的li风格如下：

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

当我将鼠标悬停在li边框上时，不会出现li的移动。是否有可能出现不可见的“边界”？

您可以使用“透明”作为颜色。在IE的某些版本中，它显示为黑色，但是自IE6以来，我还没有对其进行测试。

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

你们中的许多人必须登陆这里才能找到不透明边框而不是透明边框的解决方案。在这种情况下，你可以使用rgba，其中a代表alpha。

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

演示版

在这里，你可以改变opacity的border，从0-1

如果您只是想要一个完整的透明边框，则最好使用transparent，例如border: 1px solid transparent;

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

li {
  display: inline-block;
  padding: 6px;
  border-width: 0px;
}

li:hover {
  border: 1px solid #FC0;
  padding: 5px;
}

<ul>
  <li>Hovering is great</li>
</ul>

嘿，这是我经历过的最好的解决方案。这是CSS3

在您的div或您想放置边框透明的任何地方使用以下属性

例如

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

这会工作..

是的，您可以使用 border: 1px solid transparent

另一种解决方案是outline在鼠标悬停时使用（并将边框设置为0），这不会影响文档流：

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

注意 您只能将轮廓设置为sharthand属性，而不能将其设置为单个面。它仅用于调试，但效果很好。

由于您在评论中说，您拥有的选择越多越好，这是另一种选择。

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

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

然后，在现代浏览器中，元素将始终具有相同的宽度。也就是说，如果在悬停时对其应用边框，则边框的宽度将不会增加元素的整体宽度；可以说，边框将被添加到元素的“内部”。但是，如果我没记错的话，必须明确指定width它才能正常工作。在这种特定情况下，这可能不是您的选择，但是您可以在以后的情况中牢记这一点。

该博客条目提供了一种border-color: transparent在IE6中进行仿真的方法。下面的示例包括博客条目注释中显示的“ 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);
}

确保border-colorIE6修复中使用的.testDiv元素未在元素中的任何位置使用。我将示例从更改为pink，#FEFEFE因为似乎更不可能使用它。

最简单的解决方案是将其rgba用作颜色：border-color: rgba(0,0,0,0);即完全透明的边框颜色。

使用透明属性

border-color : transparent;