本文主要是介绍html 之原生箭靶，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
效果如如下：
当然你也可以将颜色换成其他的颜色，代码如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>原生箭耙图</title><style type="text/css">*{margin: 0;padding: 0;}.centent1{width: 10px;height: 10px;background-color: red;border-radius: 50%;} .centent2{padding: 10px;background-color: white;border-radius: 50%;} .centent3{width: 30px;height: 30px;padding: 10px;background-color: red;border-radius: 50%;}.centent4{width: 50px;height: 50px;padding: 10px;background-color: white;border-radius: 50%;}.centent5{width: 70px;height: 70px;padding: 10px;background-color: red;border-radius: 50%;}.centent6{width: 90px;height: 90px;padding: 10px;background-color: white;border-radius: 50%;}.centent7{width: 110px;height: 110px;padding: 10px;background-color: red;border-radius: 50%;}.centent8{position: fixed;top:50%;left: 50%;margin-left: -65px;margin-top: -65px;border-radius: 50%;}</style>
</head>
<body><div class="centent8"><div class="centent7"><div class="centent6"><div class="centent5"><div class="centent4"><div class="centent3"><div class="centent2"><div class="centent1"> </div> </div></div></div></div></div></div></div>
</body>
</html>
这篇关于html 之原生箭靶的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
