我已经在我的网站上添加了一个正常的正方形图像,并将其变成了具有border-radius的圆圈,然后尝试在其周围添加一个圆圈边框,但它似乎只适用于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
解决方法
看到这个JsFiddle
- .avatar {
- width:128px;
- margin: 10px;
- border:10px solid red;
- border-radius: 500px;
- -webkit-border-radius: 500px;
- -moz-border-radius: 500px;
- }