border-radius属性失效问题的解决办法

今天调试项目的时候突然发现，设置的border-radius竟然失效了，打开f12，眼看着浏览器把这个属性也给划掉了，不是一般的郁闷，按照道理来说，不应该会出现这样神奇的bug。

图片.png

css代码：

#photo{
width: 80px;
height:80px;
border-radius:10px ;
}

解决办法：万能的!important;

在border-radius属性里面添加!important：

CSS中的!important一般都是用于对低版本的除了iE 6 ，用来做hack的，后面缀上了!important的css语句，让浏览器首选执行这个语句，因为css有继承的样式，加上!importanrt可以覆盖父级的样式。

#photo{
width: 80px;
height:80px;
border-radius:40px !important;
}

完美解决：

图片.png

原文作者：祈澈姑娘技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。