填充在边框div上不起作用

用户名

我正在尝试在带有背景图像的div周围放置一个圆形边框。我希望背景图片尽可能大，并在边框和边框之间添加10px的填充。当用户滚动并移除边框时，此图像转换（缩小）为50px，因此需要保留背景图像，该图像占用尽可能多的空间

的CSS

.brand, .brand:visited, .brand:hover {
 display: block;
 position: relative;
 height: 100px; width: 100px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 padding: 10px;
 border: 1px solid #fff;
 border-radius: 50%;
}

除填充外，一切正常。不知道如何解决它。另外，我不要剪切背景图像

保利

元素的背景适用于任何填充...除非更改了background-clip属性。

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  padding: 10px;
  border: 1px solid red;
  border-radius: 50%;
  background-clip: content-box;
}
.brand:hover {
  padding: 5px;
}

<div class="brand"></div>

替代方法：对外部“边框”使用宽边框和阴影。

* {
  box-sizing: border-box;
}
.brand {
  margin: 25px auto;
  position: relative;
  height: 100px;
  width: 100px;
  background: url('http://lorempixel.com/image_output/city-q-c-200-200-7.jpg') no-repeat center center;
  background-size: 100% auto;
  box-shadow: 0px 0px 0px 1px red;
  border: 10px solid white;
  border-radius: 50%;
}
.brand:hover {
  border-width: 5px;
}