如何使用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,它们会将hex颜色应用于您的元素.

演示

演示2(带有嵌套div的背景图片)

演示3(带img标签而不是abackground-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

您也可以border-style: double在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;
}

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

Answer 3

使用:before伪元素,
CSS3的border-radius,
有些透明是很容易的:

现场演示

<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,块,绝对的,等...),透明,并与发挥边界的不透明度.