前端css线性渐变

background: linear-gradient(90deg,red,green);

1.支持多颜色渐变

2.支持多方向渐变 to left to top left

3.支持角度90deg

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 10px solid gray;
            background: linear-gradient(90deg,red,green);
            /* 1.支持多颜色渐变 
               2.支持多方向渐变   to left    to top left
               3.支持角度90deg
               
               */
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
相关推荐
杨芋爽13 分钟前
管理后台列表页为什么一直转圈?从一次 1+N 请求扇出聊聊前端性能优化
javascript
晴天1623 分钟前
Chrome DevTools 深度调试指南
前端·chrome·chrome devtools
林冠宏_指尖下的幽灵25 分钟前
AI发展下的后编程时代思考
前端·人工智能·后端
_山海1 小时前
Bun入门指南
前端·javascript·后端
想睡懒觉1 小时前
我用 CSS 3D 做了个星空隧道 Loading,没有 Three.js
前端
labixiong1 小时前
transition 写在 CSS 变量上为什么不生效?给变量补张「类型身份证」
前端·css·html
YHL1 小时前
🧠 Agent 记忆进阶:总结压缩与向量检索 —— 从截断到 Milvus 长期记忆
前端·人工智能
YHL1 小时前
🎯 JavaScript 单例模式(Singleton Pattern)—— 从理论到实战
javascript·设计模式
用户921080262861 小时前
前端 Vue 专栏 05:从 Object.defineProperty 到 Proxy,彻底理解 Vue 响应式原理
前端