使用 linear-gradient 创建渐变背景色的背景

.page-header {
    color: #fff;
    text-align: center;
    background-color: #5FC3E4;
    background-image: linear-gradient(120deg, #E55D87, #5FC3E4);
}

 

CSS linear-gradient() 函数

gradient 美[ˈɡreɪdiənt] n. (尤指公路或铁路的) 坡度,斜率,倾斜度; (温度、压力等的) 变化率,梯度变化曲线;

 

<style>
#grad1 {
    height: 100px;
    background: linear-gradient(0deg, red, blue); 
}

#grad2 {
    height: 100px;
    background: linear-gradient(90deg, red, blue); 
}

#grad3 {
    height: 100px;
    background: linear-gradient(180deg, red, blue); 
}

#grad4 {
    height: 100px;
    background: linear-gradient(-90deg, red, blue); 
}
</style>
</head>
<body>

<h3>线性渐变 - 使用不同的角度</h3>
<div id="grad1" style="color:white;text-align:center;">0deg</div><br>
<div id="grad2" style="color:white;text-align:center;">90deg</div><br>
<div id="grad3" style="color:white;text-align:center;">180deg</div><br>
<div id="grad4" style="color:white;text-align:center;">-90deg</div>

 

参考:

https://www.runoob.com/cssref/func-linear-gradient.html
https://ustbhuangyi.github.io/better-scroll/#/zh
https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient

修改时间 2019-06-27

真诚赞赏,手留余香
赞赏
PS 手绘
20190104 手绘口罩女
2019-01-06
JavaScript
base64格式图片转换为FormData对象进行上传
2019-01-13
ngtwewy
随机推荐
Node.js 图片处理模块 Jimp
如何练线
MySQL 处理高并发,防止库存超卖(乐观锁和悲观锁)
Nginx NJS 模块,在 Nginx 中运行 JavaScript
使用 svg 作为背景图片
CentOS 7 SSH 使用证书登录
使用 “Content Security Policy 网页安全策略” 防御 XSS 攻击
MySQL truncate 和 delete 的区别
Nginx 如何配置 Basic Auth 认证
PHP-FPM 对三种子进程的管理模式

微信联系我

夜间模式切换
回到顶部