Question

我的li样式如下：

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

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

Answer 1

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

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

Answer 2

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

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

Demo

在此，您可以更改opacity的{{1}} border

如果您只想要一个完整的透明边框，最好使用0-1，例如transparent

Answer 3

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

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

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

Answer 4

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

将以下属性用于您的div或任何您想要使用border trasparent

的地方

e.g。

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

这将有效..

Answer 5

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

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

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

NB。您只能将轮廓设置为sharthand属性，而不是单个边。它只是用于调试，但效果很好。

Answer 6

既然你在评论中说过你拥有的选项越多越好，这是另一个选择。

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

来使用后者

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

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

Answer 7

This blog entry可以在IE6中模拟border-color: transparent。以下示例包含在博客条目评论中提出的“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-color元素中的任何位置都不使用IE6修补程序中使用的.testDiv。我将示例从pink更改为#FEFEFE，因为这似乎更不可能被使用。

Answer 8

最简单的解决方法是使用rgba作为颜色：border-color: rgba(0,0,0,0);这是完全透明的边框颜色。

Answer 9

使用透明属性

border-color : transparent;

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

9 个答案: