前端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>
相关推荐
火车叼位23 分钟前
脚本伪装:让 Python 与 Node.js 像原生 Shell 命令一样运行
运维·javascript·python
VT.馒头23 分钟前
【力扣】2727. 判断对象是否为空
javascript·数据结构·算法·leetcode·职场和发展
鹏北海24 分钟前
micro-app 微前端项目部署指南
前端·nginx·微服务
发现一只大呆瓜27 分钟前
虚拟列表:从定高到动态高度的 Vue 3 & React 满分实现
前端·vue.js·react.js
css趣多多30 分钟前
add组件增删改的表单处理
java·服务器·前端
证榜样呀36 分钟前
2026 大专计算机专业必考证书推荐什么
大数据·前端
蓝帆傲亦43 分钟前
前端性能极速优化完全指南:从加载秒开体验到丝滑交互
前端·交互
鱼毓屿御1 小时前
如何给用户添加权限
前端·javascript·vue.js
JustHappy1 小时前
「web extensions🛠️」有关浏览器扩展,开发前你需要知道一些......
前端·javascript·开源
何中应1 小时前
nvm安装使用
前端·node.js·开发工具