这里是一个演示:http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

要在IE8及更老版本中使用此功能，必须下载并使用CSS3 PIE。我上面的演示不能在IE8中运行，但这只是因为jsFiddle不支持PIE.htc。

我的演示是这样的:

假设你有这样的图像:

要做出一个圆，你只需要加

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

如果你有一个div，你可以做同样的事情。

请看下面的例子:

.circle { 这个特性:50%; 宽度:100 px; 身高:100 px; 动画:堆叠溢出的例子无限20秒线性; pointer-events:没有; ｝ @keyframes stackoverflow { 从{ 变换:旋转(0度); ｝ , { 变换:旋转(360度); ｝ ｝ < div > <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png"> < / div >

添加css属性:

这个特性:50%;

对任何div都是圆形的。

宽度和高度取决于大小，但要保持两者相等 .circle { 背景颜色:灰色; 身高:400 px; 宽度:400 px; 这个特性:100%; ｝ < div class = "圆" > < / div >

.circle { 高度:20眼动; 宽度:20眼动; 这个特性:50%; background - color: # EF6A6A; ｝ < div class = "圆" > < / div >

试试这个

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }