css圆角边框制作

CSS 圆角边框制作方法

使用 border-radius 属性可以轻松实现圆角边框效果。该属性允许设置元素的四个角的圆角半径。

基本语法：

border-radius: 值;

示例：

.box {
  border-radius: 10px;
  border: 2px solid #333;
  width: 200px;
  height: 100px;
  background-color: #f0f0f0;
}

设置不同圆角半径

可以为四个角分别设置不同的圆角半径，顺序为左上、右上、右下、左下。

语法：

border-radius: 左上 右上 右下 左下;

示例：

.box {
  border-radius: 10px 20px 30px 40px;
}

椭圆形状圆角

通过使用斜杠 / 可以设置椭圆形状的圆角，斜杠前为水平半径，斜杠后为垂直半径。

语法：

border-radius: 水平半径 / 垂直半径;

示例：

.box {
  border-radius: 50px / 25px;
}

单独设置每个角的圆角

CSS 还提供单独设置每个角的属性，可以更精确地控制圆角效果。

属性列表：

border-top-left-radius
border-top-right-radius
border-bottom-right-radius
border-bottom-left-radius

示例：

.box {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}

圆形元素

将 border-radius 设置为 50% 可以创建圆形元素。

示例：

.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ff0000;
}

兼容性

border-radius 属性在现代浏览器中得到广泛支持，但在旧版本浏览器中可能需要使用前缀。

带前缀的写法：

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

通过以上方法，可以灵活地实现各种圆角边框效果。