鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ postcss-write-svg實現(xiàn)1px邊框

postcss-write-svg實現(xiàn)1px邊框

問題描述

看了大漠老師的文章 移動端下1px 的解決方案
用了 postcss-write-svg
可是邊框上下顯示 左右不顯示。不知道是不是自己哪里用錯了

相關(guān)代碼

@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;
}

出現(xiàn)的效果是
clipboard.png

不知道怎么才可以實現(xiàn)左右也可以顯示正常 ~求教..感謝

回答
編輯回答
拮據(jù)

border: 1px solid transparent
border-image: svg(1px-border param(--color #00b1ff)) 1 stretch

2017年3月13日 05:30
編輯回答
怣人

自問自答 ：

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

可是實現(xiàn)2變 如果是全部boder還未解決

2017年10月8日 12:04