border-radius 和 border 设置在一起效果不对

作者: xuefeilvye | 来源:发表于2019-05-13 17:43 被阅读0次

移动端项目中遇到圆形图片需要加边框
一开始的解决方法

img{
  width:3.95rem;
  height:2.02rem;
  border-radius: 100%;
  border:0.02rem solid #f5f5f5;
}

会看到边框和图片间存在间隙，或者某一方向的边框不见了
后来改成
border:1px solid #f5f5f5;
间隙没有了，边框也完整的显示了出来

更深层的原因暂时还不太清楚

border-radius 和 border 设置在一起效果不对
移动端项目中遇到圆形图片需要加边框一开始的解决方法会看到边框和图片间存在间隙，或者某一方向的边框不见了后来...
CSS3实现圆形图片
实现步骤：设置图片border-radius为50%即可。代码：效果：
CSS3边框
圆角边框border-radius border-radius属性值的4种写法1、border-radius设置1...
京东项目中css的一些属性
1）设置圆角border-radius border-radius: 50%; 2）设置元素的堆叠顺序1，z-in...
2018-05-11
css新特性 1.border-radius：设置圆角边框效果（1）格式1 border-radius：值，四个...
关于border-radius
今天才知道，border-radius是可以设置两个值的， CSS属性 border-radius 用来设置边框圆...
CSS3边框
border-radius 定义： border-radius属性是一个简写属性，用于设置四个border-*-r...
android下前端开发诡异bug记录&解决方法
1、border-radius有bug，围不住background描述：设置了border-radius后，背景色...
CSS3基础
圆角效果 border-radius ** border-radius*是向元素添加圆角边框。使用方法：borde...
CSS3简明教程之边框
第2章边框圆角效果 border-radius border-radius是向样式添加圆角边框，使用方法：不...