你能在CSS中设置边框不透明度吗？
你能在CSS中设置边框不透明度吗？
提问于 2010-10-31 13:48:54
有没有一种直接的CSS方法可以让元素的边界变得半透明，就像这样？
border-opacity: 0.7;如果没有，有没有人知道我如何不使用图片就能做到这一点？
回答 6
Stack Overflow用户
回答已采纳
发布于 2010-10-31 14:05:52
不幸的是，opacity属性使得整个元素(包括任何文本)都是半透明的。使边框半透明的最佳方法是使用rgba颜色格式。例如，这将产生一个不透明度为50%的红色边框：
div {
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}对于不支持rgba的非常老的浏览器(IE8或更早的浏览器)，解决方案是提供两个边框声明。第一个是不透明的，第二个是真实的。如果浏览器有能力，它将使用第二个，如果没有，它将使用第一个。
div {
border: 1px solid rgb(127, 0, 0);
border: 1px solid rgba(255, 0, 0, .5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}第一个边框声明的颜色将等同于白色背景上50%不透明的红色边框(尽管边框下的任何图形都不会渗出)。
我在上面的示例中添加了background-clip: padding-box;，以确保即使应用纯色背景，边框也保持透明。
Stack Overflow用户
发布于 2012-07-04 23:55:36
这很简单，使用0偏移量的实心阴影：
#foo {
border-radius: 1px;
box-shadow: 0px 0px 0px 8px rgba(0,0,0,0.3);
}此外，如果您为元素设置了边界半径，它将为您提供非常圆角的边框
Stack Overflow用户
发布于 2015-07-10 23:01:46
其他答案涉及边界不透明问题的技术方面，而我想介绍一个技巧(仅限纯CSS和HTML )。基本上是创建一个容器div，先有一个边框div，然后是内容div。
<div class="container">
<div class="border-box"></div>
<div class="content-box"></div>
</div>然后是CSS：(将内容边框设置为无，注意定位，以便考虑边框厚度)
.container {
width: 20vw;
height: 20vw;
position: relative;
}
.border-box {
width: 100%;
height: 100%;
border: 5px solid black;
position: absolute;
opacity: 0.5;
}
.content-box {
width: 100%;
height: 100%;
border: none;
background: green;
top: 5px;
left: 5px;
position: absolute;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4062001
复制相关文章
相似问题