SASS实现DIV扁平化长阴影的美丽效果

现如今扁平化设计风格相当流行，各种地方都可以看到它的身影，而长阴影（Long Shadow）是扁平化设计中的一个重要的概念，那长阴影到底是什么意思呢？往下看

长阴影

长阴影其实就是扩展了对象的投影，感觉是一种光线照射下的影子，通常采用角度为 45 度的投影，给对象添加了一份立体感。长阴影快速发展为流行的设计趋势，并经常被应用到扁平设计方案的对象。想这样：

今天我们就用SASS实现类似的长阴影的效果

我们拿一个登录页面作为例子，添加前是这样的

实现方法

为实现长阴影的效果我们先需要创建一个函数

/*
* 长阴影实现函数：longshadow
* $color:颜色值
* $opacity:透明度
* $stepnum:投影长度
* $stepLength:渐变步长 默认为1
*/
@function longshadow($color,$opacity,$stepnum, $stepLength:1 ){

  $gradient_steps: null;
  // 计算步数
  $steps:floor( $stepnum / $stepLength);
  
  @for $i from 0 through $steps {
    // 设置透明度
    $op: $opacity - $i / $steps ;
    // 设置颜色
    $colour_mix: rgba($color, $op);

    $seperator: null;
    // 添加连接用的逗号
    @if($i != $steps){
      $seperator: #{','};
    }
    // 拼接box-shadow语句，例：1px 1px rgba(0,0,0,1),……
    $gradient_steps: append( #{$gradient_steps}, #{$i * $stepLength }px #{$i * $stepLength }px $colour_mix $seperator );

  }
  // 拼接好的语句返回
  @return $gradient_steps;

}

创建好函数后，我们为登录框设置box-shadow属性，并调用上面的方法

.rg {
  background: #fff;
  text-align: center;
  border-radius: 5px;
  padding:20px;
//调用方法 
  box-shadow:longshadow(#dbe3f5,.5,300);
}

这样一个简单的长阴影的效果的效果就出来了

我们可以传入不同的颜色、透明度，阴影的长度一级渐变的步长

  box-shadow:longshadow(rgb(203, 203, 203),.5,300,20);

效果是这样的

最后 🙌

好啦，以上就是我本次分享的全部内容啦，如果你觉得我的文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~