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

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

html天气插件iframe,HTML_利用iframe在网页中显示天气附效果截图，css：复制代码代码如下: *{margi - phpStudy...
利用iframe在网页中显示天气附效果截图 css: 复制代码代码如下: *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} bo ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
css纵向滚动条自适应,纯css实现完美决对居中自动滚动条根据内容宽度、高度自适应,垂直水平居中,自动出现滚动条。.doc...
纯css实现完美决对居中自动滚动条根据内容宽度.高度自适应,垂直水平居中,自动出现滚动条..doc 还剩 3页未读, 继续阅读下载文档到电脑,马上远离加班熬夜! 亲,喜欢就下载吧,价低环保! 内 ...
如何在html中加入动画效果,纯css如何实现按钮的水滴动画效果？
纯css如何实现按钮的水滴动画效果?下面本篇文章就来给大家介绍一下使用纯css实现Material Design中按钮的水滴动画效果.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. ...
css怎样使弹跳的小球旋转,如何使用纯CSS实现小球跳跃台阶的动画效果（附源码）...
本篇文章给大家带来的内容是关于如何使用纯CSS实现小球跳跃台阶的动画效果(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览源代码下载 https://github ...
html中加艺术字体,CSS实现漂亮的大标题文字效果
CSS实现漂亮的大标题文字效果 10月 22, 2013 评论 (6) Sponsor 现在CSS3和HTML5已经开始流行,很多网页视觉效果是可以使用CSS来完成的,今天向大家展示一下如何用CSS来 ...
纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
css3 乌云散去,纯css实现乌云密布的天气图标效果
效果效果如下实现思路使用box-shadow属性画几个灰色的圆,将这些圆错落的组合在一起,形成乌云图案 after伪元素写乌云下的投影增加动画 dom结构用两个嵌套的div容器,父容器来 ...
纯 CSS 实现优惠券透明圆形镂空打孔效果
本文同步发布在:纯 CSS 实现优惠券透明圆形镂空打孔效果我们在做商城类项目时,时常会有开发优惠券的需求,那么我们如何通过纯 CSS 来实现类似京东.淘宝的优惠券样式. 下面给大家分享一个纯 CSS ...

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

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

最新文章

热门文章