css制作弧形
使用 border-radius 属性
通过调整 border-radius 属性可以创建不同弧度的圆角效果。设置四个角的不同值可以形成弧形。例如：
.element {
width: 200px;
height: 100px;
border-radius: 50% 50% 0 0;
}这会生成一个顶部半圆形弧线，底部保持直角。
使用伪元素和 transform
通过伪元素结合 transform 可以实现更复杂的弧形效果。创建一个伪元素并旋转或缩放：
.element::after {
content: "";
display: block;
width: 100%;
height: 50px;
border-radius: 100% 100% 0 0;
transform: scaleX(1.5);
}这种方法适合创建不对称或拉伸的弧形。
SVG 路径绘制
使用 SVG 的 <path> 元素可以精确控制弧形形状。在 CSS 中嵌入 SVG：
.element {
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 50"><path d="M0,50 Q50,0 100,50" fill="%23ccc"/></svg>');
}通过调整 d 属性中的贝塞尔曲线控制点可以修改弧度。
clip-path 属性
clip-path 可以裁剪元素为任意形状，包括弧形。使用 CSS 的 ellipse() 或自定义路径：
.element {
clip-path: ellipse(75% 50% at 50% 0%);
}这种方法支持动态调整弧形的曲率和位置。
径向渐变背景
通过 radial-gradient 可以模拟弧形视觉效果：
.element {
background: radial-gradient(ellipse at top, transparent 70%, #fff 70.5%);
}适合创建弧形边缘的过渡效果，但实际元素形状不变。
