用CSS3制作“飞镖靶”

此次需要用到的CSS3知识有:圆角(border-radius)与重复径向渐变(repeating-radial-gradient)。源码放出:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>	
	<style>
		*{margin:0; padding:0;}
		div{
			width:500px;
			height:500px;
			margin:50px auto;
			border:30px solid #f00;
			border-radius:50%;/*设置圆角为50%,使div变成圆形*/
			background:repeating-radial-gradient(circle closest-side at 50% 50%,#fff 0%,#fff 10%,#000 10%,#000 20%
			);/*重复径向渐变*/
		}
		p{
			width:100%;
			height:25px;
			text-align: center;
			line-height:25px;
			color:#f00;
			font-size:18px;
			font-weight:bold;
		}
		p:last-child{/*单独设置最后的p元素*/
			height:50px;
			line-height:50px;
		}
	</style>
</head>

<body>
	<div>
		<p>1</p>
		<p>2</p>
		<p>3</p>
		<p>4</p>
		<p>5</p>
		<p>6</p>
		<p>7</p>
		<p>8</p>
		<p>9</p>
		<p>10</p>
	</div>
</body>
</html>

浏览器效果:

看完该文章有什么感受?

发表评论

电子邮件地址不会被公开。

标签:,
顶部