Question

我想制作像this这样的圆形图像我搜索过并搜索过Google但我没有找到任何解决方案来使图像四舍五入。我可以像这样做图像rounded border但我不知道如何制作图像本身已圆润。请帮助

Answer 1

使用border-radius来实现您的目标。

代码：

img{border-radius:50%;}

Answer 2

尝试此操作，通过调整height和width来更改半径。 height和width应该相等，是您需要的半径的两倍

HTML：

<div id="round">
</div>

CSS：

#round{
    height:100px;
    width:100px;
    border-radius:50%;
    background:green;
    overflow:hidden;
}

Fiddle Demo /已更新

检查此响应圈DEMO

Answer 3

如果你特别想要一个带有圆形图像的白色盒子，你只需要制作一个具有所述宽度和宽度的div。你想要的高度。在相同的背景颜色中为其指定背景颜色和1px的边框。然后在div中放置一个边界半径为50％，宽度和高度为100％的图像来填充框，你就完成了。

试试这个：http://jsfiddle.net/fWwgD/

<style type="text/css">
 body
  {
  background-color:black;
  }
#box 
  {
  width:300px;
  height:300px;
  background-color:white;
  border: 1px solid white;
  }
.circle 
  {
  border-radius:50%;
  width:100%;
  height:100%;
  }
</style>
<div id="box">
   <img src="https://www.gravatar.com/avatar/01f40d1a1219433e2f7ab40fab531142?s=32&d=identicon&r=PG&f=1" class="circle">
</div>

如何制作圆形图像

3 个答案: