scss 定制虚线边框css

Posted 2021-05-17

@mixin dotted($col,$w,$h) {
  background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, $col), color-stop(0%, rgba(255, 255, 255, 0))), 
  -webkit-gradient(linear, left top, left bottom, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(0%, $col)),
  -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0)), color-stop(0%, $col)),
  -webkit-gradient(linear, left top, left bottom, color-stop(50%, $col), color-stop(0%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(left, $col 50%, rgba(255, 255, 255, 0) 0%), 
  -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 50%, $col 0%),
  -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 50%, $col 0%),
  -webkit-linear-gradient(top, $col 50%, rgba(255, 255, 255, 0) 0%);
  background-image: -o-linear-gradient(left, $col 50%, rgba(255, 255, 255, 0) 0%), 
  -o-linear-gradient(top, rgba(255, 255, 255, 0) 50%, $col 0%),
  -o-linear-gradient(left, rgba(255, 255, 255, 0) 50%, $col 0%),
  -o-linear-gradient(top, $col 50%, rgba(255, 255, 255, 0) 0%);
  background-image: linear-gradient(to right, $col 50%, rgba(255, 255, 255, 0) 0%), 
  linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, $col 0%),
  linear-gradient(to right, rgba(255, 255, 255, 0) 50%, $col 0%),
  linear-gradient(to bottom, $col 50%, rgba(255, 255, 255, 0) 0%);
  background-position: top, left, bottom, right;
  background-size: $w $h, $h $w,$w $h, $h $w;
  background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
}