css制作半圆教程
使用CSS制作半圆的方法
通过CSS的border-radius属性可以轻松实现半圆效果，以下是几种常见方法：
基础半圆（水平或垂直方向）
.half-circle {
width: 100px;
height: 50px; /* 高度是宽度的一半 */
background: #ff6b6b;
border-radius: 50px 50px 0 0; /* 上左/上右圆角 */
}这段代码会创建一个上半圆。将border-radius改为0 0 50px 50px可得到下半圆。
左右半圆
.left-half-circle {
width: 50px; /* 宽度是高度的一半 */
height: 100px;
background: #4ecdc4;
border-radius: 50px 0 0 50px; /* 左半圆 */
}
.right-half-circle {
border-radius: 0 50px 50px 0; /* 右半圆 */
}使用伪元素创建精确半圆
.circle-mask {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
}
.circle-mask::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #ff9f1c;
border-radius: 50%;
clip-path: inset(0 0 50% 0); /* 裁剪下半部分 */
}SVG替代方案
<svg viewBox="0 0 100 50" width="100" height="50">
<path d="M 0,50 A 50,50 0 0,1 100,50 Z" fill="#2ec4b6"/>
</svg>注意事项
- 确保元素的宽高比例正确（水平半圆高度=宽度/2，垂直半圆宽度=高度/2）
- 现代浏览器支持
border-radius百分比值，但固定像素值更稳定 - 需要兼容旧浏览器时可配合
-webkit-和-moz-前缀使用 - 使用
clip-path能创建更复杂的半圆切割效果
