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

效果

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章