【html5】纯css实现圆圈中显⽰居中⽂字效果为了实现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;      }
text align center</style>
</head>
<body>
<span class="jy-circle">京</span>
<span class="jy-circle">Pa</span>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。