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

ゝ一纸荒年。 2021-11-06 00:02 416阅读 0赞

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

效果

![20190809142519300.jpg][]

新的效果－改良版

<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>

[20190809142519300.jpg]: /images/20211104/a2b5d6f55e45416cbe361c44dafa845e.png