```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.line {
height: 300px;
/* width: 300px; */
/* 實現線性漸變 */
background-image: linear-gradient(
/* to right, */
135deg,
/* to right, */
red 20%,
blue 20%,
blue 40%,
red 40%,
red 60%,
blue 60%,
blue 80%,
red 80%
);
background-size: 200px 300px;
}
</style>
</head>
<body>
<div class="line"></div>
</body>
</html>
```
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 300px;
height: 300px;
border: 1px solid red;
margin: 50px auto;
/* 徑向漸變 */
background-image: radial-gradient(
100px at center,
red,
blue
);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
- 開發工具
- VsCode
- 常用插件
- Html5
- 標簽
- video
- form
- 讀取文件
- 地理位置
- canvas
- 本地存儲
- localStorage
- sessionStorage
- 網絡狀態
- Css3
- 背景
- 邊框
- 邊框圖片
- 文字陰影
- 漸變
- Js
- ES6
- 常量和變量
- 模板字符串
- 箭頭函數
- 解構賦值
- Spread Operator
- import export
- Promise
- 打包
- webpack
- 安裝
- 為什么要打包
- 核心概念
- 熱更新
- 入門例子
- js打包
- css打包
- vue
- 簡介
- Vue-cli
- 搭建
- 打包發布
- eslint
- Mint-ui
- Vuex
- 狀態管理模式
- 使用
- main.js
- store
- component
- Mockjs
- 簡介
- EasyMock