边框半径不适用于锚点内的 img-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

边框半径不适用于锚点内的 img

P粉903969231 2024-04-06 17:20:25

[CSS3讨论组]

616

我正在使用以下 HTML 代码：

<a class="-video-detail-qualifiers-branding">
    <img src=""/>
</a>

SCSS 代码：

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  border-radius: 4px;

  img {
    height: 85px;
    width: 85px;
    padding: 5px;
  }

  img::after {
    border-radius: 4px;
  }
}

问题：上面的代码将 border-radius 应用于锚标记，但没有将 border-radius 应用于 img 标记。我希望这两个元素的边框半径必须为 4px。

P粉903969231

全部回复(1)

P粉6474494442024-04-07 00:06:18 1楼

.-video-detail-qualifiers-branding {
  border: 2px solid #D7C378;
  padding: 5px;
  display: inline-block;
  border-radius: 4px;

  img {
    display: block;
    height: 85px;
    width: 85px;
    border-radius: 4px;
  }
}

如果您从 <img> 中删除填充，并将其添加到 <a> 中，并将 display: block; 添加到它们两个中，您可以看到 border-radius 对这两个标签都有效。