02-linear-gradient

B 站视频教程

修改 webpack.config.js 使其能监听 scss 类型文件的变化，从而自动更新网页

webpack.config.js

module.exports = {
  devServer: {
    watchFiles: [
      // ...
      "./src/style/*.scss",
    ],
  },
};

创建 src/style/01-linear-gradient.scss

.example {
  width: 150px;
  height: 80px;
  float: left;
  margin-right: 15px;
  margin-bottom: 15px;
}

// 默认的渐变方向是 从上到下
.example1 {
  background: linear-gradient(#ace, #fc9);
}

// 从左到右
.example2 {
  background: linear-gradient(to Right, #ace, #fc9);
}

// 从下到上
.example3 {
  background: linear-gradient(to Top, #ace, #fc9);
}

// 从右到左
.example4 {
  background: linear-gradient(to Left, #ace, #fc9);
}

// 渐变的起始角度 45deg 为左下角
.example5 {
  background: linear-gradient(45deg, #ace, #fc9);
}

// 渐变的起始角度 -45deg 为右下角
.example6 {
  background: linear-gradient(-45deg, #ace, #fc9);
}

// 渐变的起始角度 135deg 为左上角
.example7 {
  background: linear-gradient(135deg, #ace, #fc9);
}

// 渐变的起始角度 -135deg 为右上角
.example8 {
  background: linear-gradient(-135deg, #ace, #fc9);
}

// 可以指定多个颜色，颜色均匀分布
.example9 {
  background: linear-gradient(to Right, #ace, #fc9, #ace, #fc9, #ace);
}

// 颜色也可以指定渲染的位置
.example10 {
  background: linear-gradient(to Right, #ace, #fc9 5%, #ace, #fc9 95%, #ace);
}

// 颜色也可以指定渲染的位置
.example11 {
  background: linear-gradient(to Right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
    url("https://cdn.pixabay.com/photo/2020/12/03/20/25/girl-5801502_960_720.jpg");
  background-size: 100% 100%;
}

index.html 的内容修改为

<div class="example example1"></div>
<div class="example example2"></div>
<div class="example example3"></div>
<div class="example example4"></div>
<div class="example example5"></div>
<div class="example example6"></div>
<div class="example example7"></div>
<div class="example example8"></div>
<div class="example example9"></div>
<div class="example example10"></div>
<div class="example example11"></div>

在 src/index.js 中导入 线性渐变的 scss 代码

// import './style/index.css'
// import './style/index.scss'
import "./style/01-linear-gradient.scss";