css border-radius 半圆

### 使用 CSS `border-radius` 属性实现半圆效果

为了创建一个半圆形边框的效果，可以利用 `border-radius` 属性的不同设置方式。具体来说：

通过调整容器的高度和宽度以及应用特定的 `border-radius` 值能够得到所需的形状。例如，要创建一个右半圆，可以通过如下样式定义[^1]：

div.right-semicircle {
    height: 100px;
    width: 50px;
    background-color: #9da;
    border-radius: 0 50px 50px 0;
}

如果目标是基于元素自身的尺寸比例来构建更加灵活响应式的半圆，则可采用百分比形式指定 `border-radius` 的值。这使得即使改变元素的实际宽高，也能保持良好的视觉呈现效果[^2]:

.box {
    width: 200px;
    height: 100px;
    border: 2px solid black;
    border-radius: 50%;
}

值得注意的是，除了像素(px)，还可以使用其他单位如百分比(%)或相对长度单位(em) 来表示 `border-radius` 的数值。其中，1em 默认等于16px，因此可以根据设计需求选择合适的度量单位[^3]。

另外一种方法涉及到了 `clip` 属性的应用，它允许开发者精确控制哪些部分应该被显示出来。不过对于简单的半圆绘制而言，通常仅需适当配置 `border-radius` 即可满足要求；而更复杂的图形则可能需要用到 `clip-path` 或者其他的 SVG 技术[^4]。