CSS3渐变头像女高级

CSS3渐变头像女高级

.avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(to bottom, #ffabdb 0%, #ff8282 55%, #ff5555 100%);
        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}
.avatar:hover {
        background: linear-gradient(to bottom, #ffbde0 0%, #ff87a1 55%, #ff5c73 100%);
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}
     

如何使用：

1. 在 HTML 文件中创建带有 “avatar” 类的元素，并为其设置宽度和高度。

div class="avatar">
    /div>
     

2. 在 CSS 文件中添加上述代码。

3. 可以随意更改渐变颜色和阴影效果。

4. 当鼠标悬停在头像上时，可以使用:hover伪类更改渐变颜色和阴影效果。

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