我有一个大小可变的div需要具有透明区域,后面跟着白色边框,就像此屏幕截图所示:
我没有问题能够正确获得红色透明度和形状,但不知道如何获取透明区域,然后是白色边框。我该怎么做呢?
![gap between border and background](https://istack.dev59.com/97n6u.webp)
您可以通过以下方式在背景颜色和边框之间创建间隙:
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>
#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>
链接到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;
}
我也尝试了: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;
}