锚标记内图像的焦点边界半径答案

【问题标题】：Border radius on focus for image inside anchor tag锚标记内图像的焦点边界半径
【发布时间】：2020-10-15 23:06:21
【问题描述】：

我有这个 CSS：

.sky:focus {border-radius: 25px; border: #000 solid 1px; outline: none}

&这个HTML：

<a class='sky' href='#'><img src='cloud.jpg'></a>

我希望 focus 上的边框半径为 25 像素，但它不起作用。如何为锚标签内的图像设置 focus 的边框半径？

希望：

获取：

提前谢谢你:)

【问题讨论】：

设置你的 a 标签显示：块，它应该可以工作
现在是prnt.sc/t6ardt :(
设置为 display: inline-block 这样，所以a标签取图片的内容
默认情况下，标签是内联显示的。这就是为什么你会得到奇怪的边界。在不显示的情况下使用检查器检查 a 标签：inline-block;你会看到a标签很奇怪，它在图片的底部
非常感谢 Théo Benoit，你太棒了！解决方法： .sky:focus {border-radius: 25px;边框：#000 实心 1px；大纲：无； display: inline-block;} img {border-radius: 25px;}

【解决方案1】：

已解决，谢谢 Théo Benoit！

.sky:focus {background-color:#fff; border-radius: 5px; border: #000 solid 1px; display: inline-block; padding:2px;}

【讨论】：