css3弧形卡牌（弧形卡片）

CSS3弧形卡牌

CSS3弧形卡牌是一种效果非常炫酷的卡牌，可以用于网页的很多地方，比如展示产品或者介绍新闻等。

下面是示例代码：

div class="card">
    div class="content">
    h3>
    这是卡牌标题/h3>
    p>
    这是卡牌内容/p>
    a href="#">
    了解更多>
    >
    /a>
    /div>
    /div>

下面是CSS代码：

.card {
    width: 300px;
    height: 200px;
    background-color: #ddd;
    border-radius: 50% / 10%;
    position: relative;
    overflow: hidden;
    margin: 50px auto;
}
.card:after {
    content: "";
    display: block;
    position: absolute;
    left: -30px;
    bottom: -50px;
    width: 400px;
    height: 400px;
    background-color: #f60;
    border-radius: 50%;
    z-index: -1;
    transform: rotate(-45deg) translate(-50%, 50%);
}
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 20px;
    color: #fff;
}
    

这里使用了border-radius属性来设置弧形，同时利用:after伪元素来创建一个大圆，通过transform属性将其旋转、平移，实现覆盖的效果。

需要注意的是，这个卡牌的弧线不是一个完整的圆形，而是使用了椭圆的方式，在border-radius中的第二个参数设置了10%的水平半径，实现了弧形效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！