【html5】纯css实现圆圈中显示居中文字效果

最新推荐文章于 2024-09-29 09:36:14 发布

Joker_Ye

最新推荐文章于 2024-09-29 09:36:14 发布

阅读量1w

点赞数 4

文章标签： css 圆圈带字效果代替logo显示 h5图案文字图案

本文链接：https://blog.csdn.net/hj7jay/article/details/98957551

版权

为了实现qq邮箱app的邮件显示效果，就是哪个邮件左边的图案，当没有找到对应logo时，以主题头一个字作为logo

代码如下：

<html>
<head>
<title>圆圈</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.circle {
	width: 25px;
	height: 25px;
	border-style: solid;
	border-width: 1px;
	border-radius: 50%;
	-moz-border-radius: 50%; -webkit-border-radius : 50%;
	border-color: #1E90FF;
	-webkit-border-radius: 50%;
}

.circle-text {
	font-family:"黑体",Helvetica,"Arial","Microsoft YaHei","宋体",sans-serif;;
	width: 25px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-size: 15px;
	font-weight:normal;
	color: #1E90FF;
}
</style>
</head>
<body>
	<div class="circle">
		<div class='circle-text'>京</div>
	</div>
	<br>
	<div class="circle">
		<div class='circle-text'>Pa</div>
	</div>
</body>
</html>

效果

新的效果－改良版

<html>
<head>
<title>圆圈</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">

.jy-circle{
    border: 1.5px solid #1E90FF;
    color: #1E90FF;
    font-size: 16px;
    border-radius: 100%;
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 28px;
    background-color: #FFF;
    text-align: center;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    font-family:font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;   
    }
</style>

</head>
<body>
	<span class="jy-circle">京</span>
	
	<span class="jy-circle">Pa</span>
</body>
</html>