如何仅用CSS隐藏img图片但保留边框（无额外容器）

给定如下img标签和基础样式：

<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png" alt="">

.image {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 10px solid #fff;
}

要仅通过.image选择器实现隐藏图片内容但保留边框的效果，可采用以下两种可行方案：

方案一：通过object-position移出图片 #

.image {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 10px solid #fff;
    /* 将图片定位到可视区域外，仅保留边框 */
    object-fit: none;
    object-position: -9999px -9999px;
}

原理：object-fit: none让图片保持原始尺寸不缩放，object-position将图片移到容器外的极远位置，使图片内容完全不可见，但元素本身的边框仍保留在原位置。

方案二：通过mask遮罩隐藏中间图片 #

.image {
    width: 200px;
    height: 200px;
    border-radius: 100%;
    border: 10px solid #fff;
    /* 径向渐变遮罩：中间透明隐藏图片，边缘黑色显示边框 */
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 10px), black calc(50% - 10px));
    mask: radial-gradient(circle, transparent calc(50% - 10px), black calc(50% - 10px));
}

原理：利用径向渐变创建遮罩，中间区域（半径为元素一半减去边框宽度）设为透明以隐藏图片；边框所在的环形区域设为黑色，允许边框正常显示。添加-webkit-前缀兼容webkit内核浏览器。

为什么之前的尝试无效？ #

• visibility: hidden/opacity: 0会作用于整个元素，包括边框，无法单独保留边框样式
• img是替换元素，::before/::after伪元素无法生效，无法用伪元素模拟边框
• rgba边框配合opacity会让整个元素透明，无法实现仅隐藏图片的需求

内容的提问来源于stack exchange，提问作者Hristo Mutafov