css3写矩形半弧形 |css模仿a标签手形

以下是一个利用 CSS3 实现矩形半弧形的示例代码：

这是一个矩形半弧形效果的示例
/* CSS 代码 */
.mybox {
width: 200px;
height: 100px;
border: 1px solid #ccc;
background-color: #f5f5f5;
border-radius: 50px 50px 0 0;
}

在上面的代码中，大家定义了一个 box 容器，并给其添加了一些基本样式。然后，利用 border-radius 属性，大家设置了左上角和右上角的圆角半径为 50px，其余两个角的圆角半径则为 0。

这样，矩形的上面就出现了两个半弧形。

除了借助 border-radius 属性，大家还可以使用伪元素实现更加复杂的矩形半弧形效果。

/* CSS 代码 */
.mybox {
position: relative;
width: 200px;
height: 100px;
border: 1px solid #ccc;
background-color: #f5f5f5;
}
.mybox::before,
.mybox::after {
content: "";
position: absolute;
top: -1px;
width: 50px;
height: 50px;
border: 1px solid #ccc;
background-color: #f5f5f5;
border-radius: 0 0 0 50px;
}
.mybox::before {
left: -50px;
}
.mybox::after {
right: -50px;
border-radius: 0 0 50px 0;
}

在上面的代码中，大家创建了两个伪元素，并利用它们实现了两个半圆形。大家使用了绝对定位，将半圆形放在了矩形的上面。

在利用 CSS3 实现矩形半弧形效果时，大家需要注意不同浏览器的兼容性问题。通常情况下，Chrome、Safari、Firefox 和 IE9+ 等现代浏览器支持使用 border-radius 属性创建半角矩形，而在使用伪元素时，要注意 IE7 和 IE8 不支持伪元素，需要特殊处理。