如何使用 CSS 制作透明边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2506844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a transparent border with CSS?
提问by William Calleja
I have an listyled as follows:
我有一个li样式如下：
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
When I hover over the lithe border appears without making the li's shift around. Is it possible to have a 'border' that's not visible?
当我将鼠标悬停在li边框上时，会出现li's 移位。是否有可能有一个不可见的“边界”？
回答by Douglas
You can use "transparent" as a colour. In some versions of IE, that comes up as black, but I've not tested it out since the IE6 days.
您可以使用“透明”作为颜色。在某些版本的 IE 中，它显示为黑色，但自 IE6 天以来我还没有测试过它。
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
http://www.researchkitchen.de/blog/archives/css-bordercolor-transparent.php
回答by Mr. Alien
Many of you must be landing here to find a solution for opaque border instead of a transparent one. In that case you can use rgba, where astands for alpha.
你们中的许多人必须登陆这里才能找到不透明边框而不是透明边框的解决方案。在这种情况下，您可以使用rgba, wherea代表alpha。
.your_class {
height: 100px;
width: 100px;
margin: 100px;
border: 10px solid rgba(255,255,255,.5);
}
Here, you can change the opacityof the borderfrom 0-1
在这里，你可以改变opacity的border，从0-1
If you simply want a complete transparent border, the best thing to use is transparent, like border: 1px solid transparent;
如果你只是想要一个完整的透明边框，最好使用的是transparent，比如border: 1px solid transparent;
回答by Matt Ellen
You could remove the border and increase the padding:
您可以删除边框并增加填充：
li {
display: inline-block;
padding: 6px;
border-width: 0px;
}
li:hover {
border: 1px solid #FC0;
padding: 5px;
}<ul>
<li>Hovering is great</li>
</ul>回答by Raau
hey this is the best solution I ever experienced.. this is CSS3
嘿，这是我经历过的最好的解决方案..这是 CSS3
use following property to your div or anywhere you wanna put border trasparent
将以下属性用于您的 div 或您想要放置边框透明的任何地方
e.g.
例如
div_class {
border: 10px solid #999;
background-clip: padding-box; /* Firefox 4+, Opera, for IE9+, Chrome */
}
this will work..
这将工作..
回答by DisgruntledGoat
Yep, you can use border: 1px solid transparent
是的，你可以使用 border: 1px solid transparent
Another solution is to use outlineon hover (and set the border to 0) which doesn't affect the document flow:
另一种解决方案是outline在不影响文档流的情况下使用悬停（并将边框设置为 0）：
li{
display:inline-block;
padding:5px;
border:0;
}
li:hover{
outline:1px solid #FC0;
}
NB. You can only set the outline as a sharthand property, not for individual sides. It's only meant to be used for debugging but it works nicely.
注意。您只能将轮廓设置为 sarthand 属性，而不是单个边。它仅用于调试，但效果很好。
回答by ЯegDwight
Since you said in a comment that the more options you have, the better, here's another one.
既然您在评论中说您拥有的选择越多越好，那么这里还有一个。
In CSS3, there are two different so-called "box models". One adds the border and padding to the width of a block element, while the other does not. You can use the latter by specifying
在 CSS3 中，有两种不同的所谓“盒子模型”。一个将边框和内边距添加到块元素的宽度上，而另一个则没有。您可以通过指定使用后者
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
Then, in modern browsers, the element will always have the same width. I.e., if you apply a border to it on hover, the width of the border will not add to the overall width of the element; the border will be added "inside" the element, so to speak. However, if I remember correctly, you must specify the widthexplicitly for this to work. Which is probably not an option for you in this particular case, but you can keep it in mind for future situations.
然后，在现代浏览器中，元素将始终具有相同的宽度。即，如果您在悬停时为其应用边框，则边框的宽度不会增加元素的整体宽度；可以这么说，边框将被添加到元素的“内部”。但是，如果我没记错的话，您必须明确指定width才能使其工作。在这种特殊情况下，这可能不是您的选择，但您可以在将来的情况下牢记这一点。
回答by Sonny
This blog entryhas a way to emulate border-color: transparentin IE6. The below example includes the "hasLayout" fix that is brought up in the blog entry comments:
这个博客条目有一种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);
}
Make sure that the border-colorused in the IE6 fix is not used anywhere in the .testDivelement. I changed the example from pinkto #FEFEFEbecause that seems even less likely to be used.
确保border-colorIE6 修复中使用的 未在.testDiv元素中的任何地方使用。我将示例从 更改为pink，#FEFEFE因为这似乎更不可能被使用。
回答by Jake Wilson
The easiest solution to this is to use rgbaas the color: border-color: rgba(0,0,0,0);That is fully transparent border color.
最简单的解决方案是使用rgba作为颜色：border-color: rgba(0,0,0,0);即完全透明的边框颜色。
回答by Prabesh Guragain
Use transparent property
使用透明属性
border-color : transparent;
