Postcss-write-svg implements 1px frame

problem description

read teacher Damu"s article, the solution of 1px on mobile
uses postcss-write-svg
, but the border shows up and down but not left or right. I don"t know if I used it wrong

.

related codes

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

-sharpdemo{
    border: 1px solid transparent;
  border-image: svg(1px-border param(--color -sharpc0c0c0)) 2 2 stretch;
}
The effect of

is
clipboard.png

I don"t know how to realize left and right, but also can show normal. Thank you


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

self-question and answer:

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

but to achieve 2 changes, if all boder has not been solved


border: 1px solid transparent
border-image: svg (1px-border param (--color-sharp00b1ff)) 1 stretch


Hello, do you use less or other precompilers? I have an error in border-image compilation after using less. Please reply. Thank you
clipboard.png

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3210b-4d482.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3210b-4d482.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?