scss MX-边界半径

Posted 2021-05-17

div class="card demo1">
  <p>border-radius mixin</p>
</div>
<pre>
  <code>@include border-radius(1em);</code>
</pre>

<div class="card demo2">
  <p>border-radius mixin</p>
</div>
<pre>
  <code>@include border-radius(25px,5px,25px,5px);</code>
</pre>

@mixin border-radius($top-left:10px, $top-right:null, $bottom-right:null, $bottom-left:null){
  -webkit-border-radius: $top-left $top-right $bottom-right $bottom-left;
     -moz-border-radius: $top-left $top-right $bottom-right $bottom-left;
      -ms-border-radius: $top-left $top-right $bottom-right $bottom-left;
          border-radius: $top-left $top-right $bottom-right $bottom-left;  
}

/* mixin usage */
.demo1 {
  @include border-radius(1em);
}
.demo2 {
  @include border-radius(25px,5px,25px,5px);
}

/* demo styles */
.card {
  width: 20em;
  margin: 2em auto 1em;
  text-align: center;
  border: 1px solid black;
}
pre + .card {
  margin-top: 2em;
}
body {
  text-align: center;
}