内部边界有透明间隙

Question

我有一个不同大小的div,需要有一个透明区域,后跟一个白色边框,如截图所示:

我没有问题获得红色透明度和形状正确,但我不知道如何获得透明区域后跟白色边框.我怎样才能做到这一点？

Answer 1

你在背景颜色和边框之间留有间隙:

• 一个要素.
• 一个透明的边框,使框阴影和背景之间的透明间隙.
• background-clip:padding-box;剪切透明边框内的背景(否则背景颜色会溢出并透过透明边框显示,此处有更多信息).
• a 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>