html实现卡片样式链接

⌚Time: 2024-05-01 20:58:00

👨‍💻Author: Jack Ge

如何让链接有卡片样式，鼠标覆盖有透明效果，可以设置为块级元素


    .card-link {
        display: inline-block;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
    }
    .link-color {
        background-color: rgb(20,68,106);
        opacity: 0.9;
    }

在鼠标覆盖时改变透明度变化

    .card-link:hover {
        opacity: 0.7;
    }

使用

<a class="card-link link-color" href="#"></a>