CSS 为圆形图像添加边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16310985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add border to circle image
提问by SlightlyClever
I've added a normal square image to my website and made it into a circle with border-radius and then have tried to add a circle border around it but it only seems to work on Chrome. Any suggestions on how I can fix this?
我在我的网站上添加了一个普通的方形图像，并将其制作成一个带有边框半径的圆形，然后尝试在它周围添加一个圆形边框，但它似乎只适用于 Chrome。关于如何解决这个问题的任何建议？
.face {
display: block;
margin: auto;
border-radius: 100%;
border: 5px solid #ff675b;}
Here is a screenshot of the issue: https://www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
这是问题的截图：https: //www.dropbox.com/s/4xy26phkjgz9te0/Screen%20Shot%202013-05-01%20at%2001.15.02.png
回答by Akusete
See this JsFiddle
看到这个 JsFiddle
.avatar {
width:128px;
margin: 10px;
border:10px solid red;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
}
回答by ufukomer
That is the way I use:
这就是我使用的方式：
CSS:
CSS：
.avatar {
display: block;
border-radius: 200px;
box-sizing: border-box;
background-color: #DDD;
border: 5px solid #cfd8dc;
}
img {
height: 200px;
width: 200px
}
HTML:
HTML：
<img class="avatar" src="..">
回答by Manh Kh?i Duong
create a new class:
创建一个新类：
.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);
}
and this would be your html code:
这将是您的 html 代码：
<div class="circleborder"><img src="URL"/></div>
回答by Francisco Afonso
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/rounded-border/
Border radius doesn't work the same way in every browser. You need different approaches.
边框半径在每个浏览器中的工作方式都不同。你需要不同的方法。
回答by SlightlyClever
The HTML:
HTML：
<div class="circleborder"><img class="face" src="img/face.jpeg" alt="face" width="130" height="130"></div>
CSS:
CSS：
.face {
border-radius: 100%;}
.circleborder {
border: 5px solid #ff675b;
border-radius: 100%;
display: inline-block;}
Thanks for your help guys! I'm testing my solution as we speak and sofar it's worked on Chrome & Safari on my Mac and iPhone! :D
谢谢你们的帮助！我正在测试我的解决方案，到目前为止，它可以在我的 Mac 和 iPhone 上的 Chrome 和 Safari 上运行！:D
回答by Muhammad Hamza Nisar
Try this one it will be help for you.
试试这个，它会对你有所帮助。
.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 */
}
