CSS 图像周围的圆形边框剪裁

Question

我正在尝试向 .svg 文件的社交图标添加圆形轮廓（边框）。制作 sircle 本身不是问题，但边框会在图片本身上创建一个不可见的层，切断边角，这是我试图避免的。

有没有办法在不改变图像本身的情况下避免这种情况发生？

我尝试查找解决方案并尝试了多种解决方案，但 none 有效。

HTML代码：

<input type="image" name="submit" src="ic_youtube.svg" id="yt">

CSS代码：

input[type="image"]#yt {
    position: absolute;
    border: 1px solid rgba(227, 227, 228, 1);
    border-radius: 50%;
    width: 16px;
    margin-left: 254px;
    margin-top: 620px;
    padding-top: 17px;
    padding-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
}

See the issue here

Answer 1

您可以将输入包裹在 div 中，并将边框添加到 div 中。看看我在这里做了什么：

input[type="image"]#yt {
    width: 16px;
}

#iconContainer {
    position: absolute;
    border: 4px solid rgba(227, 227, 228, 1);
    border-radius: 50%;
    margin-left: 254px;
    margin-top: 620px;
    padding-top: 17px;
    padding-bottom: 18px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: visible;
}

<div id="iconContainer">
<input type="image" name="submit" src="http://www.clker.com/cliparts/1/9/e/4/13140637591549686593blue%20square.png" id="yt"> 
</div>

CSS 图像周围的圆形边框剪裁

CSS Circle border clipping around image

css

border