如何使用CSS创建透明边框？

我有一个

li

样式如下：

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

当我将鼠标悬停在

li

上时，边框将出现，而不会使

li

移动。有可能有一个不可见的“边框”吗？

您可以使用“透明”作为颜色。在某些版本的IE中，它显示为黑色，但我从IE6开始就没有测试过它

---

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

li{
显示：内联块；
填充：6px；
边框宽度：0px；
}
李：悬停{
边框：1px实心#FC0；
填充物：5px；
}

悬停是伟大的

是的，您可以使用

边框：1px实心透明

另一种解决方案是在悬停时使用

大纲

（并将边框设置为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;

然后，在现代浏览器中，元素将始终具有相同的宽度。即，如果悬停时对其应用边框，边框的宽度将不会增加到元素的总宽度；可以说，边框将添加到元素的“内部”。但是，如果我没记错的话，您必须明确指定

宽度

，这样才能工作。在这种情况下，这可能不是您的选择，但您可以在将来的情况下记住它。

有一种方法可以模拟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);
}

确保IE6修复程序中使用的
边框颜色
未在
.testDiv
元素中的任何位置使用。我将示例从
pink
更改为
#fefefefe
，因为这似乎更不可能被使用。
嘿，这是我经历过的最好的解决方案。。这里是CSS3

将以下属性用于您的div或任何您想放置border trasparent的地方

e、 g

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

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


在这里，您可以从
0-1


如果您只是想要一个完整的透明边框，最好使用
透明
，比如
边框：1px实心透明
最简单的解决方案是使用
rgba
作为颜色：
边框颜色：rgba（0,0,0,0）是完全透明的边框颜色。
使用透明属性

border-color : transparent;

好吧，这就像一个魅力，我只是想知道是否有一个更干净的方法如何做到这一点？如果有可能有一个看不见的边界？再次感谢您的建议。这听起来像是一个更兼容的解决方案，我刚刚意识到代码的工作原理与您的需要相反！固定的。另外，我喜欢透明的颜色。我只是不知道：如果你想要一个完全可点击的
框，那么增加边框和填充是没有用的。边框属于元素（因此可单击），而填充属于父元素。如果没有
display:inline block，这是否可行稍加修改？它在ie8、Mozilla、Opera和Chrome上都能工作，对我来说已经足够好了，我没有在Safari上试用过，但我不太介意Safari。谢谢！是的，特别是IE6，这不适用。IE7没问题。不幸的是，这对我不起作用。我最终使用了完全由边界构成的伪元素。。。真是一团糟！谢谢！我注意到Chrome现在忽略了透明边框，所以border:1px solid transparent不再适用于Chrome 84版。Go Figure这可能是透明边框的一个使用案例-不要在悬停时应用边框，而是将其颜色从透明更改为您可以看到的颜色。您可以使用此工具将十六进制转换为rgba颜色。。。您可以选择在URL中指定十六进制颜色，如。。。
border-color : transparent;