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

Posted 2023-03-06

【中文标题】如何使用 CSS 制作透明边框？

【英文标题】：How to make a transparent border using CSS?

【发布时间】：2013-07-19 00:49:42

【问题描述】：

我正在尝试为拥有博客的客户做这样的事情。

她想要一个半透明的边框。我知道将其作为背景是可能的。但我似乎找不到这种用于横幅的 css 技术背后的逻辑/代码。有人知道怎么做这个吗？这将有很大帮助，因为这是我的客户想要为他的博客实现的外观......

【问题讨论】：

可能重复：***.com/questions/4062001/css3-border-opacity

喜欢这个？ jsfiddle.net/6qJcc/1

【参考方案1】：

如果你想要完全透明，那么你可以使用

border: 5px solid transparent;

如果您的意思是不透明/透明，则可以使用

border: 5px solid rgba(255, 255, 255, .5);

这里，a 表示 alpha，您可以缩放 0-1。

还有一些人可能会建议您使用opacity，它也可以完成相同的工作，唯一的区别是它会导致子元素也变得不透明，是的，有一些解决方法，但rgba 似乎比使用更好opacity.

对于旧版浏览器，始终使用#(hex) 声明背景颜色作为备用，这样如果旧版浏览器无法识别rgba，它们会将hex 颜色应用于您的元素.

Demo

Demo 2（带有嵌套 div 的背景图片）

Demo 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*/

注意（对于演示3）：图像将根据高度和 提供宽度，因此请确保它不会破坏缩放比例。

【参考方案2】：

您也可以将border-style: double 与background-clip: padding-box 一起使用，而无需使用任何额外的（伪）元素。它可能是最紧凑的解决方案，但不如其他解决方案灵活。

For example:

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

如果您仔细观察，您会发现边框和背景之间的边缘并不完美。这似乎是当前浏览器中的一个问题。但是当边框很小的时候就不那么明显了。

【讨论】：

这允许它在没有额外标记和has pretty good support 的情况下工作。 background-color 加上 border:double 不适用于没有 background-clip 样式的边框之间的透明度。

【参考方案3】：

使用:before 伪元素， CSS3 的border-radius, 还有一些透明度很容易：

LIVE DEMO

<div class="circle"></div>

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; 

:before 附加到我们的.circle 另一个元素，您只需将其设置为（ok、block、absolute 等）透明并使用边框不透明度。 p>

【参考方案4】：

使用rgba（rgb 和alpha transparency）：

border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity

alpha transparency 在 0（0% 不透明度 = 100% 透明）和 1（100 不透明度 = 0% 透明）之间变化

【讨论】：

你不能避免使用“background-clip: padding-box;”如果你想要一个明显的边界。没有这个css属性，背景色会填满所有的div，你的边框会和背景色叠加。