Html 如何使用 CSS 制作透明边框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17751093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a transparent border using CSS?
提问by user2578407
I'm trying to do something like this for a client who has a blog.
我正在尝试为拥有博客的客户做这样的事情。
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
她想要一个半透明的边框。我知道这只是一个背景是可能的。但我似乎无法找到这种横幅 css 技术背后的逻辑/代码。有人知道怎么做这个吗？这会很有帮助，因为这是我的客户想要为他的博客实现的外观......
回答by Mr. Alien
Well if you want fully transparent than you can use
好吧，如果你想要完全透明，那么你可以使用
border: 5px solid transparent;
If you mean opaque/transparent, than you can use
如果您的意思是不透明/透明，则可以使用
border: 5px solid rgba(255, 255, 255, .5);
Here, ameans alpha, which you can scale, 0-1.
在这里，a表示 alpha，您可以将其缩放为 0-1。
Also some might suggest you to use opacitywhich does the same job as well, the only difference is it will result in child elements getting opaque too, yes, there are some work arounds but rgbaseems better than using opacity.
还有一些人可能会建议你使用opacitywhich 也做同样的工作，唯一的区别是它会导致子元素变得不透明，是的，有一些变通办法，但rgba似乎比使用opacity.
For older browsers, always declare the background color using #(hex) just as a fall back, so that if old browsers doesn't recognize the rgba, they will apply the hexcolor to your element.
对于较旧的浏览器，始终使用#(hex)声明背景颜色作为后备，以便如果旧浏览器无法识别rgba，它们会将hex颜色应用于您的元素。
Demo 2(With a background image for nested div)
演示 2（带有嵌套 div 的背景图像）
Demo 3(With an imgtag instead of a background-image)
演示 3（使用img标签而不是background-image）
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that's
manually calculated*/
}
Note (For Demo 3): Image will be scaled according to the height and width provided so make sure it doesn't break the scaling ratio.
注意（对于演示 3）：图像将根据提供的高度和宽度进行缩放，因此请确保它不会破坏缩放比例。
回答by Qtax
You can also use border-style: doublewith background-clip: padding-box, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
您还可以使用border-style: doublewith background-clip: padding-box，而无需使用任何额外的（伪）元素。这可能是最紧凑的解决方案，但不如其他解决方案灵活。
例如：
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
如果仔细观察，您会发现边框和背景之间的边缘并不完美。这似乎是当前浏览器中的一个问题。但是当边界很小时它并不那么明显。
回答by Roko C. Buljan
Using the :beforepseudo-element,
CSS3's border-radius,
and some transparencyis quite easy:
使用:before伪元素，
CSS3的border-radius，
有些透明是很容易的：
<div class="circle"></div>
CSS:
CSS:
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
The :beforeattaches to our .circleanother element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
在:before我们的武官.circle另一个元素，你只需要作（OK，块，绝对的，等...），透明，发挥与边界的不透明度。
回答by Ghilas BELHADJ
use rgba(rgb with alpha transparency):
使用rgba(rgb with alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparencyvariate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
alpha transparency0（0% 不透明度 = 100% 透明）和 1（100 不透明度 = 0% 透明）之间的变量
