CSS如何设置元素圆角_掌握border-radius属性的高级用法

border-radius 四值顺序为左上、右上、右下、左下斜杠分隔水平/垂直半径三值会补全为“左上、右上、右下、右上”易出错需配合 overflow: hidden 才能裁剪子元素。border-radius 的四个值怎么填才不晕填错顺序圆角就歪了。它不是按“上右下左”顺时针记而是按「水平半径 / 垂直半径」成对出现最多四组每组两个值。常见错误现象border-radius: 10px 20px 30px; —— 这其实是三个值浏览器会自动补全第四个复制第二个变成 10px 20px 30px 20px结果和你想象的很可能不一致。单值border-radius: 8px; → 四个角都是 8px 圆角等效于 8px 8px 8px 8px双值border-radius: 4px 12px; → 水平半径 4px垂直半径 12px应用到所有角三值border-radius: 5px 10px 15px; → 等效于 5px 10px 15px 10px左上、右上、右下、左下四值border-radius: 3px 6px 9px 12px; → 明确指定左上、右上、右下、左下单独控制某个角的圆角比如只圆右上角用斜杠分隔前半部分是各角的「水平半径」后半部分是各角的「垂直半径」顺序都是左上→右上→右下→左下。使用场景做卡片右上角打标签、弹窗只圆两个角、按钮仅左端圆润等。立即学习“前端免费学习笔记深入”只圆右上角border-radius: 0 8px 0 0 / 0 8px 0 0;左上和右下为椭圆其余为直角border-radius: 10px 0 0 10px / 20px 0 0 20px;注意斜杠前后都必须有四个值缺一不可少于四个值会触发自动补全逻辑容易出错border-radius 遇到 overflow: hidden 失效不是失效是子元素溢出遮罩没生效——border-radius 只作用于自身盒模型的边框但内部内容仍可能突破这个视觉边界尤其当子元素用了 position: absolute 或负 margin。 标贝科技 标贝科技-专业AI语音服务的人工智能开放平台