css 设置圆形

最新推荐文章于 2024-10-25 13:07:18 发布

yb305小白

最新推荐文章于 2024-10-25 13:07:18 发布

阅读量3.8k

点赞数

分类专栏： css 文章标签： css css画圆

本文链接：https://blog.youkuaiyun.com/yb305/article/details/102934830

版权

css 专栏收录该内容

21 篇文章

订阅专栏

<html>
<head>
<style>
 .number{
	width: 100px;
	height: 100px;
	background-color: red;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}
.number1{
	width: 28px;
	height: 28px;
	background-color: red;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	margin-top: -100px;
	margin-left: 80px;
	z-index: 10000000;
	position: absolute;
}
.number1 span{
	padding-top: 4px;
	text-align: center;
	vertical-align: bottom;
	display: block;
	color: #fff;
	font-weight: bold;
	font-size:14px;
}
</style>
</head>
<body>
 <div class="number"></div>
 
 <div style="float:left;margin:15px;">
	 <image src="./info.png"/>
	 <div class="number1">
		<span>1</span>
	 </div>
 </div>
 
  <div style="float:left;margin:15px;">
	 <image src="./info.png"/>
	 <div class="number1">
		<span>9</span>
	 </div>
 </div>
 
  <div style="float:left;margin:15px;">
	 <image src="./info.png"/>
	 <div class="number1">
		<span>20</span>
	 </div>
 </div>
 
  <div style="float:left;margin:15px;">
	 <image src="./info.png"/>
	 <div class="number1">
		<span>99+</span>
	 </div>
 </div>
</body>
</html>