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

你可以用“透明”作为颜色。在某些版本的 IE 中，它是黑色的，但是自从 IE6出现以来，我还没有对它进行过测试。

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>

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

另一个解决方案是在悬停时使用 outline(并将边框设置为0) ，这不会影响文档流:

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

注意。您只能将大纲设置为一个渐进属性，而不能为单个边设置。它只是用于调试，但它工作得很好。

Since you said in a comment that the more options you have, the better, here's another one.

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

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

然后，在现代浏览器中，元素总是有相同的宽度。例如，如果在鼠标悬停时应用边框，边框的宽度不会增加到元素的整体宽度; 可以这么说，边框将被添加到元素的“内部”。但是，如果我没记错的话，您必须显式地指定 width才能正常工作。在这种特殊情况下，这可能不是您的选择，但是您可以在将来的情况下记住这一点。

This blog entry has a way to emulate border-color: transparent in IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:

/* 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，因为这似乎更不可能被使用。

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

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

例如:。

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

这将工作. 。

你们中的许多人一定是在这里着陆，为不透明的边界找到一个解决方案，而不是一个透明的边界。在这种情况下，您可以使用 rgba，其中 a代表 alpha。

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

Demo

在这里，您可以将 border的 opacity改为 0-1

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

The easiest solution to this is to use rgba as the color: border-color: rgba(0,0,0,0); That is fully transparent border color.

使用透明属性

border-color : transparent;