css - 边框内有透明间隙的 Div

Question

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

我可以毫无问题地获得正确的红色透明度和形状，但我不知道如何获得透明区域和白色边框。我怎样才能做到这一点？

Answer 1

您可以使用以下命令在背景颜色和边框之间留出间隙:

• 一个元素。
• 透明边框，使框阴影和背景之间形成透明间隙。
• background-clip:padding-box; 将背景剪裁在透明边框内(否则背景颜色会溢出并通过透明边框出现， more info here )。
• 一个 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>