css制作圆角页面
使用CSS制作圆角页面
CSS的border-radius属性是制作圆角的主要工具，可以应用于任何元素（如div、按钮、图片等）。以下是几种常见的实现方法：
基础圆角设置
为元素添加统一圆角：
.element {
border-radius: 10px; /* 四个角相同弧度 */
}分别设置每个角的弧度：
.element {
border-radius: 10px 5px 15px 20px; /* 顺序：左上 右上 右下 左下 */
}椭圆/圆形效果
创建椭圆形：
.element {
border-radius: 50% 30%; /* 水平半径50%，垂直半径30% */
}制作正圆形（需配合宽高相等）：
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
}现代CSS扩展属性
使用独立属性控制每个角：
.element {
border-top-left-radius: 20px;
border-bottom-right-radius: 10px;
}斜杠语法设置不同轴向半径：
.element {
border-radius: 10px 20px / 30px 40px; /* 水平半径/垂直半径 */
}响应式圆角
结合CSS变量实现动态调整：
:root {
--corner-radius: 8px;
}
.element {
border-radius: var(--corner-radius);
}
@media (max-width: 768px) {
:root {
--corner-radius: 4px;
}
}高级技巧
渐变边框圆角（需嵌套元素）：
.outer {
background: linear-gradient(45deg, red, blue);
padding: 2px;
border-radius: 12px;
}
.inner {
background: white;
border-radius: 10px;
}注意事项：
- 圆角会裁剪内容，图片/视频也会被圆角裁剪
- 过大的圆角值会导致元素呈现"药丸"形状
- 某些旧浏览器可能需要前缀（如
-webkit-border-radius） - 圆角不影响盒子模型计算，元素尺寸不变
