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);

效果是这样的

最后 🙌

好啦，以上就是我本次分享的所有内容啦，若是你以为个人文章对你有一丢丢帮助，那么请不要吝啬你的赞👍哦，阿门~