2019年-10月-23日
0
用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>
浏览器效果：
