Question

我有一个清单：

<ul class="small-block-grid-3 medium-block-grid-6">
  <li></li>
  <li></li>
  <li></li>
</ul>

每个li都有一个背景图片，边框半径为50％，使其成为一个圆圈：

background: url(test.jpg) no-repeat center / cover;
background-origin: content-box;
border-radius: 50%; //other browser prefixes removed for simple example

每个li的Foundation框架都有填充，这很好地区分了列表。

不幸的是border-radius不尊重填充，我希望边界半径在填充内部。有没有办法做到这一点？

我已经检查了一个关于SO的答案：Border-radius and padding not playing nice建议使用margin而不是padding，这意味着要覆盖我不想做的基础样式。

还有其他解决方案吗？

Answer 1

您可以使用 background-clip 属性及其值content-box

<强> Demo of 3 possible values in Codepen
（虚线和虚线边框没有显示任何有用的内容，因此我使用了double边框）

来自 MDN

background-clip CSS属性指定元素的背景（颜色或图像）是否在其边框下方延伸。

兼容性是IE9 +并且可以链接到polyfill for IE8（和IE7？但是谁更关心）

元素填充内的边界半径？

1 个答案: