在CSS中，我们可以使用border-radius属性来实现圆弧效果。该属性可以用来设置一个或四个角的弧度，使元素的边角变得圆润。

.rounded{
border-radius: 50%;
}

使用border-radius属性还可以实现椭圆的效果，只需要将水平方向和垂直方向的半径分别设置为不同的值。

.ellipse{
border-radius: 30% 50%;
}

许多情况下，我们需要根据数值的变化来改变圆弧的大小。这可以通过CSS变量实现。我们可以将变量定义为一个百分比，然后根据不同的数值设置不同的值。这可以用来改变圆形或椭圆形元素的大小。

:root {
--size: 50%;
}
.circle {
width: var(--size);
height: var(--size);
border-radius: 50%;
}
.ellipse {
--width: 30%;
--height: 50%;
width: var(--width);
height: var(--height);
border-radius: 50% 50%;
}
/* 根据数值变化改变圆弧大小 */
.circle[data-value="1"] {
--size: 20%;
}
.ellipse[data-value="2"] {
--width: 50%;
--height: 70%;
}

通过这种方法，我们可以在不改变HTML结构的情况下，根据数值的变化来改变元素的大小和形状。