CSS中的border-radius属性详解 描述 border-radius属性用于设置元素边框的圆角效果，通过调整圆角半径可实现从轻微圆润到完全椭圆的视觉效果。该属性支持1-4个值，可分别控制四个角的圆角半径，并支持使用斜杠语法定义水平半径和垂直半径的不同值。 基本语法和取值 单一值 ： border-radius: 10px; 表示四个角均为10px圆角半径。 多个值 ： 两个值： 10px 20px → 左上/右下为10px，右上/左下为20px。 三个值： 10px 20px 30px → 左上10px，右上/左下20px，右下30px。 四个值： 10px 20px 30px 40px → 顺时针从左上角开始分别设置。 椭圆圆角：斜杠语法 通过 水平半径 / 垂直半径 定义非对称圆角： 示例： border-radius: 20px / 10px; 表示所有角的水平半径为20px，垂直半径为10px，形成椭圆角。 扩展语法： border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; 可分别设置每个角的水平和垂直半径。 具体角控制 可使用子属性单独控制某个角： border-top-left-radius ：左上角 border-top-right-radius ：右上角 border-bottom-right-radius ：右下角 border-bottom-left-radius ：左下角 示例： border-top-left-radius: 20px 10px; 定义左上角水平半径20px、垂直半径10px。 百分比值的计算 百分比相对于元素自身的尺寸计算： 水平半径百分比参考元素宽度，垂直半径百分比参考元素高度。 示例：对200px×100px的元素设置 border-radius: 50%; ，实际效果为水平半径100px、垂直半径50px，形成椭圆。 实际应用技巧 圆形元素 ：对宽高相等的元素设置 border-radius: 50% 即可实现圆形。 胶囊按钮 ：对矩形设置 border-radius: 高度值/2 （如高度30px时设为15px）。 高级形状 ：结合不同角的半径可绘制半圆、扇形等（如仅设置两个相邻角为50%）。 注意事项 圆角部分不会触发点击事件（遵循可见轮廓）。 父元素设置 overflow: hidden 时，子元素不会溢出圆角区域。 背景色/背景图片会适应圆角，但边框样式可能受浏览器渲染差异影响。