圆形带图标文字按钮

最新推荐文章于 2023-09-23 08:38:28 发布

多隆

最新推荐文章于 2023-09-23 08:38:28 发布

阅读量1.8k

点赞数

分类专栏： # 前端

本文链接：https://blog.csdn.net/huayushuangfei/article/details/78349042

版权

前端专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用CSS创建圆形图片，并实现鼠标悬停时的文字及边框颜色变化效果。通过设置border-radius属性为50%，使得div内的图片呈现为圆形。同时，通过:hover伪类选择器改变a标签下的span元素的颜色和边框颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS代码如下：

.tupian {
    width: 60px;
    height: 60px;
    line-height: 58px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    font-size: 24px;
    border-width: 1px;
    border-style: solid;
    border-color: #777;
    background: transparent none repeat scroll 0% 0%;
    margin: 0 auto;
}

.wenzi {
    height: 30px;
    line-height: 30px;
}


.wrapper a {
    outline:none;
    text-decoration: none;
}

.wrapper a span {
    color: #777;
    text-align: center;
    display: block;
}
.wrapper a:hover span {
    color: #555;
}

.wrapper a:hover span.tupian {
    border-color: #555;
}

HTML代码：

<div class="wrapper">
    <a href="#">
        <span class="tupian"><i class="icon-file"></i></span>
        <span class="wenzi">测试</span>
    </a>
</div>