我有一个li，样式如下：
li{
display:inline-block;
padding:5px;
border:1px solid none;
}
li:hover{
border:1px solid #FC0;
}
当我将鼠标悬停在li 上时，会出现边框，而不会使li 左右移动。是否有可能有一个不可见的“边框”？
【问题讨论】：
标签： css transparency border-color
您可以使用“透明”作为颜色。在某些版本的 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);
}
在这里，您可以将border 的opacity 更改为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>【讨论】：
<a/> 框，那么减少边框和增加填充是没有用的。边框属于元素（因此可点击），而填充属于父元素。
display: inline-block; 稍加修改，这是否可以工作？
嘿，这是我经历过的最好的解决方案.. 这是 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 才能使其正常工作。在这种特殊情况下，这可能不适合您，但您可以牢记这一点，以备不时之需。
【讨论】：
This blog entry 可以在 IE6 中模拟 border-color: transparent。下面的示例包括在博客条目 cmets 中提出的“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，因为这似乎更不可能被使用。
【讨论】：
使用透明属性
border-color : transparent;
【讨论】：
最简单的解决方案是使用rgba 作为颜色：border-color: rgba(0,0,0,0); 那是完全透明的边框颜色。
【讨论】：