图像在一个圆圈

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

Answer 2

除了@Jay Patel之外，你可以尝试一下：

<强> HTML

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

<强> CSS

.img-circle {
  width: 90%;
  border: 10px solid white;

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

       -webkit-box-shadow: 0 5px 12px rgba(0,0,0,1);  
          -moz-box-shadow: 0 5px 12px rgba(0,0,0,1);  
               box-shadow: 0 5px 12px rgba(0,0,0,1);
}
#container
{
    background-color:red;
    width:35%;
    padding:10px;
}

演示： here

Answer 3

如果您想要内置投影，可以使用inset选项box-shadow。

JSFiddle Demo

<强> HTML

<div class=circle>
    <div class=image>
</div>

<强> CSS

.circle {
   background : red;
   display    : inline-block;
}

.circle .image {
    margin              : 10px;
    border-radius       : 50%;
    width               : 250px;
    height              : 250px;
    box-shadow          : inset 0 0 30px #000000;
    background-image    : url(http://i.stack.imgur.com/Ysyvw.png);
    background-position : 50%;
}