html - 圆圈中的图像

Question

假设我有以下图片:

在我的网站上，我想用这样的圆圈包围它:

问题:是否可以使用 CSS 来做到这一点/如何做？如果是，哪个选项更好，是用圆圈实际制作图像还是使用 CSS？

Answer 1

是，您可以使用 CSS 创建

现场查看jsFiddle

HTML

<div id="outbody">
    <img class="img-circle" src="http://i.stack.imgur.com/Ysyvw.png">
</div>

CSS

#outbody
{
    width:35%;  
    padding:10px;    
    background-color:#fe0000;
}
.img-circle {
  width: 90%;
  border: 10px solid white;

    -webkit-border-radius: 50%;
       -moz-border-radius: 50%; 
            border-radius: 50%;

       -webkit-box-shadow: 0 0px 15px rgba(0,0,0,1);  
          -moz-box-shadow: 0 0px 15px rgba(0,0,0,1);  
               box-shadow: 0 0px 15px rgba(0,0,0,1);
}