常见需求：CSS 实现弧形卡片的 3 种方式
/* 方法 1: 使用 border-radius 创建弧形 */
.arc-card-1 {
width: 200px;
height: 100px;
background-color: #f3f3f3;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
/* 方法 2: 使用伪元素和 transform 创建弧形 */
.arc-card-2 {
position: relative;
width: 200px;
height: 100px;
background-color: #f3f3f3;
overflow: hidden;
}
.arc-card-2::before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
background-color: inherit;
border-top-right-radius: 50%;
}
/* 方法 3: 使用 SVG 创建弧形 */
.arc-card-3 {
width: 200px;
height: 100px;
background-color: #f3f3f3;
mask: url(#arc-mask); /* 引用 SVG 中定义的遮罩 */
}
<!-- 在 HTML 中的 <head> 或 <body> 里定义 SVG 遮罩 -->
<svg width="0" height="0">
<defs>
<clipPath id="arc-mask">
<path d="M0,0 L200,0 A50,50 0 0 1 200,100 L0,100 Z" fill="white"></path>
</clipPath>
</defs>
</svg>以上 CSS 代码展示了创建弧形卡片的三种不同方法：使用 border-radius、伪元素和 transform，以及 SVG 遮罩。每种方法都有各自的优点和适用场景，可以根据实际需求选择合适的方法实现弧形卡片效果。
评论已关闭