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

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

Javascript Border-Properties css postcss Front-end

Nov.03,2021

@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

Previous: How vue dynamically creates or deletes dom elements

Next: Implementation of single sign-on function in vue