备案控制台
开发者社区 开发与运维 文章 正文

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

2023-11-09 70
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： border-radius属性失效问题的解决办法

今天调试项目的时候突然发现，设置的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;
}

完美解决：

文章标签：
前端开发
祈澈菇凉
目录
相关文章
讓丄帝愛伱
|
6月前
|
JavaScript
background-color设置为透明的方法
background-color设置为透明的方法
讓丄帝愛伱
94 0
song19990524
|
9月前
|
前端开发 JavaScript 开发者
设置height:100%无效的原因以及两种解决方法
设置height:100%无效的原因以及两种解决方法
song19990524
581 0
程序边界
|
Web App开发
【已解决】浏览器无法设置小于12px的字体大小（font-size）
浏览器无法设置小于12px的字体大小（font-size）
程序边界
325 0
coypdkduljqgk
display:none到display:block失效问题及解决办法
display:none到display:block失效问题及解决办法
coypdkduljqgk
280 9
肥晨
display与overflow同时使用时，overflow会失效如何解决
笔记
肥晨
270 0
display与overflow同时使用时，overflow会失效如何解决
狂奔滴小马
|
前端开发 JavaScript 测试技术
前端妹子问我 position fixed 失效问题该如何解决？
这两天公司一位妹子问我，“我这边调试的时候本地显示没问题，到手机端就有问题，该怎么办呢？” 测试环境没问题到线上就有问题了？对此我也很纳闷。
狂奔滴小马
396 0
Java4ye
|
前端开发
vcharts设置legend属性无效解决办法
内容概览 需求： 折线图上有 一个产品的目标值和实际值 ，通过点击其中一个legend，同时隐藏该产品的实际值和目标值（指折线图上的线） 当我觉得这个需求很 easy 的时候，居然发现 动态设置 legend 属性无效 …… 通过本文来记录这个解决过程，前端真是太难了 哈哈 在 v-charts 中， 折线图的写法如下： <ve-line :extend="chartExtend" :data="chartData" :events="chartEvents" height="58vh" ></ve-line>。 而 v-charts 是对 echart 的包装，很多事件都可以从 ech
Java4ye
1143 0
chokcoco
|
前端开发 容器
探究 position-sticky 失效问题
探究 position-sticky 失效问题
chokcoco
1149 0
探究 position-sticky 失效问题
学堂小助手
|
前端开发 开发者
Border 属性 | 学习笔记
快速学习 Border 属性。
学堂小助手
106 0
Border 属性 | 学习笔记
佀无极
|
Web App开发 前端开发
css3给元素的border、margin、pading、font-size和width等属性设置动态值使用函数calc()
佀无极
1552 0