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

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);
}

演示

在这里,你可以改变opacity的border,从0-1

如果您只是想要一个完整的透明边框,最好使用的是transparent,比如border: 1px solid 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或任何你想要边界trasparent

例如

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

这会工作..