CSS环绕图像的圆形边框剪裁

Question

我正在尝试为.svg文件中的社交图标添加一个圆形轮廓(边框(。制作条纹本身不是问题，但边界在图片本身上形成了一个看不见的层，切掉了角落，这是我试图避免的。

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

我试着查找解决方案，尝试了多种解决方案，但都不起作用。

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;
}

请参阅此处的问题

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>