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

Question

我试图为有博客的客户做这样的事情。

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

Answer 1

那么如果你想完全透明的比你可以使用

border: 5px solid transparent; 

如果你的意思是不透明/透明，比你可以使用

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

这里，a指α，您可以缩放，0-1。

还有些可能会建议你使用opacity该做相同的工作为好，唯一的区别是它会导致子元素变得不透明过，是的，有一些变通，但rgba似乎比使用opacity更好。

对于旧的浏览器，始终声明使用#（十六进制）的背景颜色，就像一个回落，因此，如果旧的浏览器无法识别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）：图像将根据高度和所提供的宽度进行缩放，因此请确保它不会不打破缩放比例。

Answer 2

使用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％透明）

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另一个元素，你只需要作（好吧，块，绝对等等）透明并且与边界不透明度一起玩。

Answer 4

您也可以使用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; 
} 

如果你仔细观察，你可以看到边框和背景之间的边缘并不完美。这在目前的浏览器中似乎是个问题。但是当边界很小的时候并不明显。