小编Sli*_*ver的帖子

我已经在我的网站上添加了一个正常的方形图像并将其变成了一个带有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

我已经在CSSpress网站上几页的横幅部分使用CSS添加了背景图片，并且使用自动前缀可以在Chrome / Safari / IE / Firefox的桌面上正常工作。出于某种原因，在移动浏览器上（我已经在iPhone上的Chrome和Safari上进行了测试），一些横幅图像可以正确显示，而其他则不能。

.banner {
position: relative;
overflow: hidden;
background: -webkit-linear-gradient(bottom left, rgba(37, 17, 36, 0.45), rgba(37, 17, 36, 0.45)), url(img/banners/home.jpg);
background: linear-gradient(bottom left, rgba(37,17,36,0.45),rgba(37,17,36,0.45)),url(img/banners/home.jpg);
background-size: cover;
text-align: center;
background-position: center center;
}

左边的图像是正确显示背景图像的页面，而右边的图像是没有显示页面的页面。两者都具有与使用的图像完全相同的css：

更新： 在听取了一些建议之后，我尝试调整一些图像的大小，以查看它们是否适用于移动设备上的Chrome / Safari：

如您所见，调整大小后的图像在我的iPhone上的Chrome和Safari上都能正常工作。Apple的IOS文档建议最大尺寸为1024px，但1400px对我来说很好（尽管我确实必须删除手机上Safari设置中的cookie和数据）