700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 【html5】纯css实现圆圈中显示居中文字效果

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

时间:2020-02-09 00:58:54

相关推荐

【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; }</style></head><body><span class="jy-circle">京</span><span class="jy-circle">Pa</span></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。