背景颜色渐变

Posted 2020-10-22 H小白

 

背景颜色线性渐变【 linear-gradient】

语法：

background:linear-gradient(起点，起点颜色，过度色[可选]，终点颜色);

起点：top是从上到下、left是从左到右，如果定义成left top，那就是从左上角到右下角。

过度色：可以插入多个，表示多种颜色的渐变

demo

<style type="text/css" rel="stylesheet">
　　.box{
　　　　width: 100px;
　　　　height: 100px;
　　　　margin: 50px auto;
　　　　/*从上之下线性渐变*/
　　　　/*方向,线性渐变开始颜色,线性渐变过度颜色,线性渐变最终颜色,20px表示距某个方向20px开始*/
　　　　background: -moz-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -webkit-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -o-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: -ms-linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　background: linear-gradient(top, #0099ff, #ffffff 20px, #00cc00);
　　　　/*根据给定角度线性渐变*/
　　　　background: -moz-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -webkit-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -o-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: -ms-linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　background: linear-gradient(20deg, #0099ff, #ffffff, #00cc00);
　　　　/*从左上角到右下角线性渐变*/
　　　　background: -moz-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -webkit-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -o-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: -ms-linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　　　background: linear-gradient(top right, #0099ff, #ffffff, #00cc00);
　　}
</style>

<div class="box"></div>