4

CSS3实现渐变背景_流媒体技术研究院的技术博客_51CTO博客

 2 years ago
source link: https://blog.51cto.com/livestreaming/5454741
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

定义与用法

css3的linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。

创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

/* 从上到下，蓝色渐变到红色 */
linear-gradient(blue, red);

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red); 

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);



CSS3实现渐变背景_多实例






浏览器支持



表格中的数字表示支持该函数的第一个浏览器版本号。



"webkit" 或 "moz" 或 "o" 指定的数字为支持该函数的第一个版本号前缀。



Chrome
​
Firefox
Safari
Opera
linear-gradient()
10.0 -webkit-
3.6 -moz-
5.1 -webkit-
11.1 -o-






CSS 语法



background-image: linear-gradient(direction, color-stop1, color-stop2, ...);



direction
用角度值指定渐变的方向（或角度）。
color-stop1, color-stop2,...
用于指定渐变的起止颜色。






以下实例演示了从左侧开始的线性渐变，从红色开始，转为黄色:



#grad {
  background-image: linear-gradient(to right, red , yellow)​;
}



以下实例演示了从左上角到右下角的线性渐变:



#grad {
  background-image: linear-gradient(to bottom right, red , yellow)​;
}



以下实例演示了线性渐变指定一个角度:



#grad {
  background-image: linear-gradient(180deg, red, yellow)​;
}



以下实例演示了多个终止色:



#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet)​;
}



以下实例使用了透明度:



#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))​;
}

        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK