如何解决border–radius与transform不能一起使用的问题
border–radius与transform不能一起使用
- 写回答
- 好问题 0 提建议
- 关注问题
分享- 邀请回答
-
2条回答 默认 最新
threenewbee 2023-03-14 17:24关注可以嵌套一个层，外面是圆弧矩形，里面是transform
本回答被题主选为最佳回答 , 对您是否有帮助呢?评论 打赏解决 1无用举报 分享
- 2024-07-12 13:32hackchen的博客 前端 纯CSS border-radius画一个波浪动画。
- 2023-07-06 15:16AI前端高级工程师的博客 【代码】父元素的border-radius不生效的问题处理。
- 2024-10-09 13:44border-radius是一个非常实用且强大的CSS属性，它在不增加额外元素的情况下，通过简单的代码就能为网页元素添加美观的圆角效果。合理的运用border-radius，配合其他的CSS技术，可以大大提升网页设计的质量和用户的...
- 2024-10-15 08:43墨渊君925的博客 在这篇文章中, 我们将探讨边框圆角的各种方面, 包括其绘制规则、在不同元素重叠情况下的表现, 以及与其他 CSS 属性相互作用的效果。通过深入理解边框圆角的工作原理, 我们将能够更好地利用这一特性, 为网页设计增添...
- 2025-12-29 02:13张较瘦_的博客 本文详细介绍了CSS中animation与transform的协同使用方法。首先解析了animation复合属性的语法规则，包括8个子属性的对应关系和注意事项。然后对比了两者的核心差异：transform负责定义元素变换效果，而animation...
- 2023-05-30 10:40FE-阿阳的博客 其实就是父级设置圆角属性失效，父元素使用border-radius和overflow:hidden做成圆形，子元素如果使用了transform属性，则父元素的overflow:hidden会失效。设置了border-radius，也设置了overflow:hidden，预览也没事...
- 2020-01-15 17:50longlongfishday的博客 .test i { display: inline-block; width: 6.6rem;... border-radius: 50%; transform: scale(.5); transform-origin: 0% unset; font-size: 4rem; border: 1px solid #fff; } 安卓border-ra...
- 2021-07-26 17:38S筱潇S四维Smile的博客 添加css即可，亲测有效 -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0);
- 2024-07-25 16:45程序边界的博客 利用关键帧创建动画使用网格和Flexbox等布局技巧对表单元素进行样式化，包括单选按钮嵌入字体以及与排版相关的样式利用伪元素和媒体查询进行条件样式化Martine Dowden是一位作家、演讲者和能力卓越的首席技术官。...
- 2025-04-27 21:23茄子忍者烧纸尿裤的博客 前端基础——5、CSS border属性与渐变色详解 CSS border属性与渐变色（详解与实战） 一、border属性全面解析 1. 基础三属性 2. 复合写法 3. 高级特性 附加.border-style详解 使用示例 效果： CSS 渐变终极指南：线性...
- 2022-12-29 10:18青青子衿~~的博客 但是当他和position：fixed一起使用的时候，会改变css固定定位的相对位置点，固定定位原本是相对于浏览器左上角0,0border-radius和transform-translate使用的时候很离谱，要保证宽高为偶数而且不能为百分比，...
- 2022-01-19 13:32前端小胡兔的博客 border-radius:50px; overflow:hidden; 子元素(img)设置: width:100%; height:100%; 这时若安卓显示圆角 ios为直角 解决方法: 给父元素设置如下样式: -webkit-backface-visibility: hidden; -moz-backface-...
- 2023-06-06 15:27第五种方案是使用:before、:after与transform，例如： ``` .radius-border{ position: relative; } @media screen and (-webkit-min-device-pixel-ratio: 2){ .radius-border:before{ content: ""; pointer-...
- 2021-11-10 18:10神奇大叔的博客 波浪核心:让border-radius没到50%再滚动起来,再用其覆盖背景,背景设置overflow:hidden; 代码示例: div { position: relative; align-items: center; min-height: 100vh; background-color: rgb(118, 218, ...
- 2020-12-24 15:50weixin_40001634的博客 通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。圆形要使用CSS来制作一个圆形，我们需要一个div，被给它设置一个ID。圆形在设置CSS时要设置宽度和高度相...
- Liang_Cheng_Jiu的博客 在ios 系统中， 设置border-radius 可能会不生效（安卓有效），直接给要设置的元素设置 border-radius属性，再添加下面的代码即可实现功能： -webkit-backface-visibility: hidden; -webkit-transform: translate...
- 没有解决我的问题, 去提问
问题事件
系统已结题
3月22日
已采纳回答
3月14日-
创建了问题
3月14日