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

作者：知新_RL | 2024-02-16 21:10:16

踩

html圆圈内文字

为了实现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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/96677