带有透明间隙的边框内的Div

3
我有一个大小可变的div需要具有透明区域,后面跟着白色边框,就像此屏幕截图所示:gap between border and background 我没有问题能够正确获得红色透明度和形状,但不知道如何获取透明区域,然后是白色边框。我该怎么做呢?

为白线添加固定高度、RGB背景和盒子阴影。我很快就会创建一个jsfiddle;抱歉...盒子阴影不起作用,你需要使用嵌套的div。 - undefined
2
可以给我们看一下你的代码吗? - undefined
1
我在获取红色透明度和形状方面没有问题...请给我们展示代码,以便其他人可以进一步扩展。 - undefined
4个回答

9

您可以通过以下方式在背景颜色和边框之间创建间隙:

  • 使用一个元素。
  • 使用透明边框来创建盒子阴影和背景之间的透明间隙。
  • background-clip:padding-box; 用于将背景剪切到透明边框内部(否则,背景颜色会溢出并出现在透明边框中,更多信息请点击此处)。
  • 使用扩散半径的 box-shadow 创建外部线条。

div {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255, 0, 0, .7);
  border: 10px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px #fff;  
}

/** FOR THE DEMO **/
body {background: url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size: cover;}
<div></div>


2
径向渐变也可以使用:

#test {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 120px center, 
      rgba(255, 0, 0, .5) 100px,
      rgba(255, 0, 0, 0) 100px,
      rgba(255, 255, 255, 0) 105px,
      rgba(255, 255, 255, .5) 105px,
      rgba(255, 255, 255, .5) 110px,
      rgba(255, 255, 255, 0) 110px
    ),
    url(http://lorempixel.com/output/nature-q-c-1280-960-5.jpg) center/cover;
}
<div id="test"></div>

径向渐变具有更多优势。例如,您可以绘制椭圆形而不是圆形,添加更多边框并创建更复杂的图案。

2

链接到Fiddle

div{
    background: #f00;
    height: 100px;
    width: 100px;
    border-radius: 100px;
    position: relative;
}
div:before{
    content: '';
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border: 3px solid #000;
    border-radius: 100px;
    position: absolute;
}

0

我也尝试了:http://jsfiddle.net/6o26j9e9/ 文字居中 :D

body {
    background-color: #333;
    background: url('http://www.awesomeimages.net/wp-content/uploads/2011/09/4011001045_50701c52ff_b1.jpg');
    background-size: cover;
}

.border {
    width: 500px;
    height: 500px;
    border-radius: 1000px;
    border-radius: 50%;
    border: 2px solid #FFF;
    padding: 15px;
    display: table;
}

.circle {
    width: 100%; height: 100%;
    border-radius: 1000px;
    border-radius: 50%;
    background: rgba(255,0,0,0.6);
    text-align: center;
    color: #FFF;
    display: table-cell;
    vertical-align: middle;
    font-size: 70px;

}

更新:http://jsfiddle.net/6o26j9e9/1/


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接