使用 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

真诚赞赏,手留余香
赞赏
随机推荐
使用FormData无刷新上传文件
Git 工作流程
JavaScript 操作 Cookie
Naxsi 的 MainRule
DedeCMS 织梦常见问题
Cordova 非官方插件 cordova-plugin-local-notifications 通知
阿里云 OSS 只授权一个用户控制 Bucket【OSS 细粒度的权限控制】
Thinkcmf 后台文章管理[posts]表新增字段调用编辑器
API Rate Limiting 限速
三点运算符