border-radius属性失效

border-radius失效问题及!important解决办法
调试项目时发现border - radius属性失效,浏览器将其划掉。解决办法是在border - radius属性里添加!important,CSS中的!important可让浏览器首选执行该语句,能覆盖父级样式,可解决此问题。

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

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;
}

完美解决:

 

原文作者:祈澈姑娘

欢迎关注【编程微刊】,回复“领取资源”,500G编程学习资源干货免费送。 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值