当前位置：首页 > CSS

css制作圆角矩形

2026-02-12 13:20:29CSS

使用 border-radius 属性

在 CSS 中，border-radius 是制作圆角矩形的主要属性。通过调整该属性的值，可以控制圆角的弧度大小。

.rounded-rectangle {
  border-radius: 10px;
  width: 200px;
  height: 100px;
  background-color: #3498db;
}

设置不同圆角弧度

可以为矩形的四个角分别设置不同的圆角弧度。属性值的顺序为左上、右上、右下、左下。

.asymmetric-rounded {
  border-radius: 10px 20px 30px 40px;
  width: 200px;
  height: 100px;
  background-color: #e74c3c;
}

使用百分比值

border-radius 也支持百分比值，可以创建椭圆形圆角效果。

.percentage-rounded {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background-color: #2ecc71;
}

单独控制每个角的圆角

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

.individual-corners {
  border-top-left-radius: 15px;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 45px;
  border-bottom-left-radius: 60px;
  width: 200px;
  height: 100px;
  background-color: #f39c12;
}

创建不对称圆角

结合水平和垂直半径值，可以创建更复杂的圆角形状。

.advanced-rounded {
  border-radius: 50px 20px 50px 20px / 20px 50px 20px 50px;
  width: 200px;
  height: 100px;
  background-color: #9b59b6;
}

圆角边框的兼容性

border-radius 属性在现代浏览器中支持良好。对于需要兼容旧版浏览器的情况，可以添加厂商前缀。

.legacy-support {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 200px;
  height: 100px;
  background-color: #1abc9c;
}

圆角与其他样式的结合

圆角效果可以与其他 CSS 样式结合使用，如阴影、渐变等，创建更丰富的视觉效果。

.combined-styles {
  border-radius: 25px;
  width: 200px;
  height: 100px;
  background: linear-gradient(to right, #3498db, #2ecc71);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

css制作圆角矩形