填充不在边界div上工作

Question

我试图在带有背景图像的div周围放置一个圆形边框.我希望背景图像与它和边框之间的10px填充一样大.当用户滚动并移除边框时,此图像会转换(缩小)到50像素,因此需要保留尽可能多占用空间的背景图像

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%;
}

一切都有效,除了填充.不知道如何解决它.另外,我不想剪裁背景图像

Answer 1

元素的背景适用于任何填充...除非更改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;
}

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