scss Linear-Gradient SCSS Mixin使用供应商前缀快速轻松地创建背景渐变，以获得最大的浏览器支持。

Posted 2021-05-17

<div class="card linear-gradient">
  <p>linear-gradient mixin</p>
</div>


@mixin linear-gradient($color-one,$color-two,$degrees) {
  background: -moz-linear-gradient($degrees, $color-one 0%, $color-two 100%); /* ff3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, $color-one), color-stop(100%, $color-two)); /* safari4+,chrome */
  background: -webkit-linear-gradient($degrees, $color-one 0%, $color-two 100%); /* safari5.1+,chrome10+ */
  background: -o-linear-gradient($degrees, $color-one 0%, $color-two 100%); /* opera 11.10+ */
  background: -ms-linear-gradient($degrees, $color-one 0%, $color-two 100%); /* ie10+ */
  background: linear-gradient($degrees, $color-one 0%, $color-two 100%); /* w3c */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$color-one', endColorstr='$color-two',GradientType=1 ); /* ie6-9 */
}