postcss-write-svg实现1px边框

Question

问题描述

看了大漠老师的文章 移动端下1px 的解决方案
用了 postcss-write-svg
可是边框上下显示 左右不显示。不知道是不是自己哪里用错了

相关代码

@svg 1px-border {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
  }
}

#demo{
    border: 1px solid transparent;
  border-image: svg(1px-border param(--color #c0c0c0)) 2 2 stretch;
}

出现的效果是

不知道怎么才可以实现左右也可以显示正常 ~求教..感谢

Answer 1

自问自答 ：

@svg 1px-border {
  width: 2px;
  @rect {
    fill: var(--color, black);
    width: 50%;
    height:100%;
  }
}

可是实现2变 如果是全部boder还未解决

Answer 2

@svg 1px-border {
  width: 4px;
  height: 4px;
  @rect {
    fill: transparent; 
    width: 100%; 
    height: 100%; 
    stroke-width: 25%; 
    stroke: var(--color, black);
  }
}
.test {
  border: 1px solid transparent;
  border-image: svg(1px-border param(--color red)) 1 stretch;
}

Answer 3

你好，请问你有使用less或者其他预编译器吗？我在使用了less之后出现了border-image编译出错的状况，望回复，谢谢