html - 删除移动设备上形状分隔符中出现的线条
问题描述
我在使用波浪时遇到了问题,它们在大分辨率下工作得很好。但是当我使用开发人员工具查看它在移动设备上的外观时,会出现一条线,我想删除那条线,但我不知道该怎么做,我需要使用媒体查询吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anne's Wave</title>
<style>
* {
margin: 0;
padding: 0;
}
.custom-shape-divider-bottom-1608135822 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1608135822 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.custom-shape-divider-bottom-1608135822 .shape-fill {
fill: #FFFFFF;
}
h1 {
font-family: sans-serif;
color: white;
padding: 15vh;
text-transform: uppercase;
}
</style>
</head>
<body>
<div style="position: relative; background-color: dodgerblue; min-height: 80vh;">
<h1>BE CREATIVE!</h1>
<div class="custom-shape-divider-bottom-1608135822">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120"
preserveAspectRatio="none">
<path
d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z"
class="shape-fill"></path>
</svg>
</div>
</div>
<!--Shape Divider-->
</body>
</html>
编辑
这是线的图片
解决方案
您看到的问题只是 Chrome DevTools 移动视图不是 100% 完美。毕竟,它是一个模拟器,而不是一个真正的移动设备。我能够在自己的网站上复制同样的问题,但使用实际移动设备时没有出现细线。尽管如此,如果您希望 Chrome DevTools 移动视图保持完美,您可以margin-bottom: -1px;
在 svg 形状上添加声明以缓解问题。
推荐阅读
- jenkins - Jenkins:是否可以扩展流水线脚本定义窗口?
- javascript - POST 请求后禁用按钮
- usb - 使用 Roku 的 USB 进行 ECP“查询”命令?
- ruby - 有没有找到blob uri的ruby方法?
- c - 如何在已安装系统的旁边安装最新的 glibc(2.29 版)并编译程序?
- c++ - C++:不能用 scoped_allocator_adaptor 传播 polymorphic_allocator
- javascript - 如何在不包含所有 php 文件的情况下使用 ajax 加载负载
- mysql - 怎么解决?ER_BAD_FIELD_ERROR:“字段列表”中的未知列“未定义”
- sql - Tableau 中的计算包含错误
- javascript - 使用 javascript 读取大型外部远程文件