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语音服务的人工智能开放平台