彩虹有缝隙
来源:2-28 项目作业
月入过亿
2022-07-12 15:38:18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href=""> <style> *{ margin: 0; padding: 0; } .box{ width: 220px; height: 100px; overflow: hidden; } .box1{ width: 200px; height: 200px; border: 10px solid purple; border-radius: 50%; } .box2{ width: 180px; height: 180px; border: 10px solid blue; border-radius: 50%; } .box3{ width: 160px; height: 160px; border: 10px solid green; border-radius: 50%; } .box4{ width: 140px; height: 140px; border: 10px solid yellow; border-radius: 50%; } .box5{ width: 120px; height: 120px; border: 10px solid red; border-radius: 50%; } 问题描述: </style> </head> <body> <div class="box"> <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"> <div class="box5"></div> </div> </div> </div> </div> </div> </body> </html>
问题描述:
老师我的实现之后会有缝隙
相关截图:
1回答
同学你好,老师这边测试效果是正常的,代码没有问题,应该是由于同学放大页面后导致的,如下:
放大到125%时,存在间隙
但是放大到200%,就不存在间隙了
这个现象是浏览器自身解析的问题,忽略即可。
祝学习愉快~
相似问题