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

我有一个li样式如下：如何使用CSS制作透明边框？

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

当我将鼠标悬停在li边框出现未做li的转变左右。是否有可能有一个不可见的“边界”？

来源

2010-03-24 William Calleja

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

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

来源

2010-03-24 10:30:58 Douglas

好吧，它在ie8，Mozilla，Opera和Chrome上工作，对我来说足够好，我没有在Safari上试用它，但我不介意safari太多。非常感谢！ – 2010-03-24 10:36:49

是的，它是特定的IE6，这不起作用。IE7是确定的。 – bobince 2010-03-24 11:18:37

非常感谢，它对我很好 – 2012-02-03 12:48:02

你可以删除边框，增加填充：

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

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

来源

2010-03-24 10:31:04

那么这工作就像一个魅力，我只是想知道是否有一个更清洁的方式如何做到这一点？如果它完全有可能有一个无形的边界？再次感谢您的建议。 – 2010-03-24 10:33:32

这听起来像是一个更兼容的解决方案 – NibblyPig 2010-03-24 10:37:10

刚刚意识到代码与您需要的方式相反！固定。另外，我会选择透明颜色。我只是不知道它：D – 2010-03-24 11:02:35

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

另一个解决方案是悬停使用outline （并将边框设置为0），其中没有不影响文档流程：

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

注意：您只能将轮廓设置为sharthand属性，而不是针对单个侧面。它只是用于调试，但它很好地工作。

来源

2010-03-24 10:34:18 DisgruntledGoat

非常感谢！我有更好的选择 – 2010-03-24 10:38:11

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

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

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

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

来源

2010-03-24 10:54:45

这可能是一个用于透明边框的用例 - 不是在悬停时应用边框，而是将其颜色从透明改为可以看到的东西。 – DaveWalley 2014-01-23 18:09:09

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

确保在IE6修复使用的border-color没有在.testDiv元素的任何地方使用。我将示例从pink更改为#FEFEFE，因为这似乎不太可能被使用。

来源

2011-08-03 15:36:33 Sonny

嘿，这是我经历过的..这是CSS3

使用下列属性与您的股利或任何你想去把边境trasparent

例如最佳解决方案

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

这会工作..

来源

2012-05-04 09:19:52 Raau

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

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

Demo

在这里，你可以从0-1

的border的opacity改变。如果你只是想有一个完整的透明边框，使用最好的事情是transparent，像border: 1px solid transparent;

来源

2013-09-13 04:56:37

您可以使用此工具将十六进制转换为rgba颜色... http://www.hexcolortool.com ...您可以在URL中选择指定十六进制颜色，例如... http ：//www.hexcolortool.com/#ffcc00 – clayRay 2017-08-07 01:31:15

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

来源

2014-12-09 00:20:39

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

回答

相关问题