css圆角边框bug

Question

设置图片的圆角和边框宽度以后，有的手机可以正常显示，有的机型就会出现部分边框无法显示，如图所示

运行在微信的webview中。

Answer 1

给装盛图片的盒子设置border-radius之后，同时也要给该盒子下的img也设置同样大小的border-radius。 或者给盒子设置一个overflow:hidden。

也就是说并不是边框圆角没设置上，而是图片把设置上圆角的盒子给遮住了，因为图片是矩形的，并不是圆形的，虽然切图时四个角没有颜色或者背景为透明，但是最终图片会是矩形，为了给所有设备都显示相同效果，请尝试一下我给你说的两个方法中的一个。

希望能帮助到你

Answer 2

把

border: 2px solid #fff;

换成

padding: 2px;
background-color: #fff;

试试？