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

Question

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

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

Answer 1

如果你想要完全透明，那么

border: 5px solid transparent;

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

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

此处，a表示alpha，您可以缩放，0-1。

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

对于较旧的浏览器，请始终使用#（十六进制）声明背景颜色作为后退，这样如果旧浏览器无法识别rgba，它们将应用{{1你元素的颜色。

Demo

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

Demo 3（使用hex代码而不是img）

background-image

  

注意（演示3）：图像将根据高度和尺寸进行缩放   提供宽度，以确保它不会破坏缩放比例。

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

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

Answer 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等等）透明并使用边框不透明度

Answer 4

使用rgba（rgb与alpha transparency）：

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

0 {0％不透明度= 100％透明度和1（100不透明度= 0％透明度）之间的alpha transparency变量