css圆角制作

CSS圆角制作方法

使用border-radius属性可以轻松为元素添加圆角效果。该属性接受长度值（如px、em、%）或关键字（如round），支持简写和分方向设置。

基础语法：

border-radius: 10px; /* 四个角相同 */
border-radius: 10px 5px; /* 左上右下 右上左下 */
border-radius: 10px 5px 8px 3px; /* 左上 右上 右下 左下 */

椭圆角效果

通过斜杠分隔水平半径和垂直半径，可以创建椭圆角：

border-radius: 50px / 20px; /* 水平50px 垂直20px */
border-radius: 10px 30px 20px 5px / 5px 10px 15px 20px; /* 分方向设置 */

单个角设置

如需单独控制某个角，可使用以下属性：

border-top-left-radius: 10px;
border-top-right-radius: 5px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 3px;

百分比值

百分比基于元素尺寸计算，适合创建圆形：

border-radius: 50%; /* 圆形（需元素宽高相等） */

高级技巧

1. 圆形按钮

   

   .circle-btn {
     width: 100px;
     height: 100px;
     border-radius: 50%;
   }

2. 胶囊形状

   .pill-shape {
     border-radius: 9999px; /* 极大值实现 */
     /* 或 */
     border-radius: 50vh; /* 基于视口高度 */
   }

3. 不规则圆角

   .custom-shape {
     border-radius: 20px 40px 60px 80px / 10px 30px 50px 70px;
   }

浏览器兼容性

现代浏览器均支持border-radius，包括IE9+。对于旧版浏览器，可添加前缀：

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;