前端 - 这是不是移动端得小bug

 粪想升或_519 发布于 2022-11-04 14:03

多种方法实现锯齿形边框-背景图多出一根小细线

  1. 之前用css3 渐变来实现,多出一根小细线, 弃之

  2. 然后,切出小三角形,背景x轴循环,发现也是一样

ps: pc端就显示正常,不知道为什么,难道我要把整个锯齿边框切图出来,才可以吗。

//--这里直接将锯齿线做成一个p,用来分割 .i_sawtooth_pide { height: 12px; width: 100vw; overflow: hidden; border-top: 2px solid #eadfd9; background: linear-gradient(-45deg, red 50%, transparent), linear-gradient(-135deg, blue 50%); background-size: 12px 12px; background-repeat: no-repeat; }

// 这是第二种

.sawtooth_pide_up {
background-color: #eadfd9;
border: 0;
width: 100%;
height: 8px;
background-image: url('./imgs/sawtooth_up.png');
background-size: auto 100%;
background-repeat: repeat-x;
background-position: 0 0;

}

6 个回答
  • 试一下:
    font-size:0;

    2022-11-08 05:09 回答
  • 垂直切图,水平平铺

    2022-11-08 05:19 回答
  • 显而易见的是,背景和锯齿之间有了空隙.

    空隙的原因就需要你贴代码出来了.
    根据你移动端才有,而PC端没有 的说明, 不负责任的猜测一下

    类似REM的计算问题,导致了他俩有了小于1PX的间隙,然后浏览器又把这个渲染为了1PX.

    2022-11-08 05:26 回答
    1. 试着清除浮动或者变成块级元素。

    2. 1楼说的,做一个外边距。

    2022-11-08 05:39 回答
  • 楼上正解,把花边往下移一点儿

    2022-11-08 05:43 回答
  • 你把锯齿下面的部分设置个margin—top:-1px就行

    2022-11-08 05:51 回答
撰写答案
今天,你开发时遇到什么问题呢?
立即提问
热门标签
PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有