css3 背景渐变色

从左往右渐变色背景设置:如下图

渐变一:从左边开始的线性渐变,起点红色,中间黄色,终点红色。

 css代码:

div{
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to right, red, yellow,red); 
}

渐变二:从左边开始的线性渐变,起点黄色,慢慢过渡到红色。

 

  css代码:

div{
height: 200px;
background-color: red; /* 浏览器不支持时显示 */
background-image: linear-gradient(to right, yellow,red);
}

从上往下渐变色背景设置:如下图

从上边开始的线性渐变,起点红色,慢慢过渡到黄色

 

 

 

div{
    height: 200px;
    background-color: red; /* 浏览器不支持时显示 */
    background-image: linear-gradient(red, yellow);
}

 

posted @ 2021-07-20 17:11  骄傲一点才可爱  阅读(695)  评论(0编辑  收藏  举报