2
边框半径,以百分比(%)和像素(px)或em为单位
如果我使用像素或em值作为边界半径,则即使该值大于元素的最大边,其边缘半径也始终是圆弧或药丸形状。 当我使用百分比时,边缘半径为椭圆形,开始于元素各边的中间,从而形成椭圆形或椭圆形: 边框半径的像素值: 显示代码段 div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> 运行代码段隐藏结果展开摘要 边界半径的百分比值: 显示代码段 div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> 运行代码段隐藏结果展开摘要 为什么以百分比表示的边框半径与以像素或em值设置的边框半径不一样?
124
css
css-shapes