css制作圆角页面

使用 border-radius 属性

在 CSS 中，border-radius 是制作圆角的主要属性。可以为元素的四个角分别设置圆角半径，或统一设置。数值越大，圆角弧度越明显。

.element {
  border-radius: 10px; /* 统一设置四个角 */
}

单独设置每个角的圆角

通过指定具体角的属性，可以单独控制每个角的弧度：

.element {
  border-top-left-radius: 5px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 10px;
}

使用百分比实现椭圆效果

border-radius 支持百分比值，可以创建非对称圆角或椭圆形状：

.element {
  border-radius: 50%; /* 圆形效果（需正方形元素） */
}

简写语法

border-radius 支持简写形式，按顺时针方向（左上、右上、右下、左下）设置：

.element {
  border-radius: 5px 10px 15px 20px; /* 四个不同值 */
  border-radius: 10px 20px; /* 左上右下10px，右上左下20px */
}

响应式圆角设计

结合 CSS 变量或媒体查询，可以实现动态圆角效果：

:root {
  --corner-radius: 8px;
}

.element {
  border-radius: var(--corner-radius);
}

@media (max-width: 768px) {
  .element {
    border-radius: 4px;
  }
}

注意事项

• 圆角效果不会裁剪内容区域，仅影响边框和背景的显示。
• 对于图片圆角，需确保图片本身有透明背景或与父元素背景匹配。
• 某些旧版浏览器可能需要前缀（如 -webkit-border-radius）。