这是不是移动端得小bug

fcxh
  • 434

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

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

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

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

<div class="sawtooth_divide_up"></div> //--这里直接将锯齿线做成一个div,用来分割
.i_sawtooth_divide {
    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_divide_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;

}

回复
阅读 2.8k
6 个回答

你把锯齿下面的部分设置个margin—top:-1px就行

楼上正解,把花边往下移一点儿

  1. 试着清除浮动或者变成块级元素。

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

显而易见的是,背景和锯齿之间有了空隙.

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

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

垂直切图,水平平铺
clipboard.png

试一下:
font-size:0;

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏