边框div的填充不起作用

Question

我正在尝试在一个带有背景图片的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%;
}

除了padding之外，一切正常。不确定如何修复它。此外，我不想剪裁背景图片。

- user3550879

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>

- Paulie_D

---

我不希望图像被裁剪 - user3550879

好答案Paulie，从这里开始用户可以根据自己的需求进行定制。 - Persijn

添加了另一种选择。 - Paulie_D

糟糕，这就是我希望填充起作用的原因，它需要看起来像一个有间隔的边框/轮廓。 - user3550879

你仍然可以使用第一种选项，只需调整背景大小即可。 - Paulie_D

Answer 2

在相对定位的 .brand 上添加了一个边框，并使用绝对定位的 :after 伪类来实现，以创建一个超出形状的圆形。

.brand,
.brand:visited,
.brand:hover {
  position: relative;
  height: 100px;
  width: 100px;
  margin-top: 25px;
  margin-left: 25px;
  background: url('http://lorempixel.com/200/200') no-repeat center center;
  background-size: 100% auto;
  border-radius: 50%;
}
.brand:before {
  display: inline-block;
  position: absolute;
  left: -15px;
  top: -15px;
  content: "";
  width: 120px;
  height: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
}
body {
  background-color: #222;
}

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

- Persijn

---

顺便说一下，你需要将 //border: 5px solid #fff; 改为 /*border: 5px solid #fff;*/，因为在 CSS 中不能使用 //。 - Asons

虽然在技术上说这是正确的，但是任何“错误”的规则都会被忽略，所以添加 // 就打破了规则。 - Persijn

Answer 3

据我所知，不可能有一个未被裁剪的background:考虑到padding:。

所以...这有点hacky，但是你可以:

1. 声明box-sizing: border-box;
2. 用border:代替padding:；然后
3. 用box-shadow:代替border:。

请参见下面的示例：

/* Your original styles */
.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%;
}

/* A few extra styles just to make the background and border visible */
.brand, .brand:visited, .brand:hover {
 background-color: rgb(0,0,0);
 border: 1px solid rgb(255,0,0);
}

/* An alternative using border-box, and box-shadow */
.brand2, .brand2:visited, .brand2:hover {
 display: block;
 position: relative;
 height: 122px; width: 122px;
 margin-top: 25px;
 background: url('img/logo.png') no-repeat center center;
 background-size: 100% auto;
 background-color: rgb(0,0,0);
 border: 10px solid #fff;
 border-radius: 50%;
 box-sizing: border-box;
 box-shadow:1px 1px rgb(255,0,0), 1px -1px rgb(255,0,0), -1px -1px rgb(255,0,0), -1px 1px rgb(255,0,0);
}

/* Lining everything up */
div[class^='brand'] {
float: left;
margin-right:20px;
}

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

- Rounin

---

那会切掉背景图片吗？我已经设置让它填充整个 div。所以我知道它会忽略 padding。我只需要在边框和背景之间留出空间。 - user3550879

上面的示例中，圆圈的半径完全相同。第一个 content-box 圆是 50px 的内容半径 + 10px 的内边距 + 1px 的边框（61px），第二个 border-box 圆是 61px 的半径（包括 50px 的内容半径、10px 的边框和 1px 的盒子阴影）。在这两种情况下，内容半径都是 50px。因此，如果您的背景图像为 100px x 100px，除了角落部分外，没有任何东西会被裁剪掉。 - Rounin