16

我在我的网站上添加了一个普通的方形图像,并将其做成一个带有边框半径的圆圈,然后尝试在它周围添加一个圆形边框,但它似乎只适用于 Chrome。关于如何解决这个问题的任何建议?

.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}

这是问题的屏幕截图: https ://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png

4

6 回答 6

25

看到这个 JsFiddle

http://jsfiddle.net/z3rLa/1/

.avatar {
    width:128px;
    margin: 10px;
    border:10px solid red;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
}
于 2013-05-01T00:27:50.547 回答
8

这就是我使用的方式:

CSS:

.avatar {
    display: block;
    border-radius: 200px;
    box-sizing: border-box;
    background-color: #DDD;
    border: 5px solid #cfd8dc;
}

img {
    height: 200px;
    width: 200px
}

HTML:

<img class="avatar" src="..">
于 2015-09-29T14:02:35.220 回答
5

创建一个新类:

.circleborder {
width: 300px;
height: 300px;
border-radius: 150px;
-webkit-border-radius: 150px;
-moz-border-radius: 150px;
background: url(URL) no-repeat;
box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .8);
}

这将是您的 html 代码:

<div class="circleborder"><img src="URL"/></div>
于 2013-05-01T00:26:11.937 回答
2

的HTML:

<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>

CSS:

.face {
border-radius: 100%;}

.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}

谢谢你们的帮助!我正在测试我的解决方案,目前它已在我的 Mac 和 iPhone 上的 Chrome 和 Safari 上运行!:D

于 2013-05-01T01:48:35.560 回答
1

http://www.css3.info/preview/rounded-border/

边框半径在每个浏览器中的工作方式都不相同。你需要不同的方法。

于 2013-05-01T00:25:15.423 回答
0

试试这个,它会对你有所帮助。

.clip-circle {
      clip-path: circle(60px at center);
      /* OLD VALUE example: circle(245px, 140px, 50px); */
      /* Yep, even the new clip-path has deprecated stuff. */
    }
    .clip-ellipse {
      clip-path: ellipse(60px 40px at 75px 30px);
      /* OLD VALUE example: ellipse(245px, 80px, 75px, 30px); */
    }
    .clip-polygon {
      clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
      /* Note that percentages work as well as px */
    }
于 2015-01-28T12:03:16.213 回答