CSS3 渐变色(Gradients)之CSS3 线形渐变色

2021-03-18 10:41 jianzhan

CSS3 渐变色(gradients)可让你在两个或好几个特定的色调之间显示信息安稳的过渡。之前,你务必应用图象来完成这些实际效果。可是,根据应用 CSS3 渐变色(gradients),你能够降低免费下载的恶性事件和光纤宽带的应用。另外,渐变色实际效果的元素在变大时看起来实际效果更好,由于渐变色(gradient)是由访问器转化成的。
 
CSS3 界定了两类型型的渐变色(gradients):
 
-----线形渐变色(Linear Gradients)- 向下/向上/向左/向右/对角方位
 
-----轴向渐变色(Radial Gradients)- 由它们的管理中心界定
 
CSS3 线形渐变色
 
以便建立1个线形渐变色,你务必最少界定两种色调结点。色调结点即你要想展现安稳过渡的色调。另外,你还可以设定1个起始点和1个方位(或1个角度)。
 
英语的语法:background: linear-gradient(direction, color-stop1, color-stop2, ...);
 
(1)、线形渐变色 - 从上到下(默认设置状况下)
 
下面的案例演试了从顶部刚开始的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 200px;   
  7.     background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */   
  8.     background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */   
  9.     background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */   
  10.     background: linear-gradient(red, blue); /* 规范的英语的语法(务必放在最终) */   
  11. }   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h3>线形渐变色 - 从上到下</h3>  
  16. <p>从顶部刚开始的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:</p>  
  17. <div id="grad1"></div>  
  18. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  19. </body>  
  20. </html>  

(2)、线形渐变色 - 从左到右
 
下面的案例演试了从左侧刚开始的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:
 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6.     height: 200px;   
  7.     background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */   
  8.     background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */   
  9.     background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */   
  10.     background: linear-gradient(to right, red , blue); /* 规范的英语的语法(务必放在最终) */   
  11. }   
  12. </style>  
  13. </head>  
  14. <body>  
  15. <h3>线形渐变色 - 从左到右</h3>  
  16. <p>从左侧刚开始的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:</p>  
  17. <div id="grad1"></div>  
  18. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  19. </body>  
  20. </html>  


(3)、线形渐变色 - 对角
 
你能够根据特定水平静竖直的起止部位来制做1个对角渐变色。下面的案例演试了从左上角刚开始(到右下角)的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6. width:500px;   
  7.     height: 200px;   
  8.     background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */   
  9.     background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */   
  10.     background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */   
  11.     background: linear-gradient(to bottom right, red , blue); /* 规范的英语的语法(务必放在最终) */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>线形渐变色 - 对角</h3>  
  17. <p>从左上角刚开始(到右下角)的线形渐变色。起始点是鲜红色,渐渐地过渡到蓝色:</p>  
  18. <div id="grad1"></div>  
  19. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  20. </body>  
  21. </html>  

(4)、应用角度
 
假如你要想在渐变色的方位上做更多的操纵,你能够界定1个角度,而无需预订义方位(to bottom、to top、to right、to left、to bottom right,这些)。
 
英语的语法background: linear-gradient(angle, color-stop1, color-stop2);
 
角度是指水平线和渐变色线之间的角度,逆时针方位测算。换句话说,0deg 将建立1个从下到上的渐变色,90deg 将建立1个从左到右的渐变色。  
 


可是,请留意许多访问器(Chrome,Safari,fiefox等)的应用了旧的规范,即 0deg 将建立1个从左到右的渐变色,90deg 将建立1个从下到上的渐变色。换算公式 90 - x = y 在其中 x 为规范角度,y为非规范角度。
 
下面的案例演试了怎样线上性渐变色上应用角度: 

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6. width:300px;   
  7.     height: 50px;   
  8.     background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */   
  9.     background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */   
  10.     background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */   
  11.     background: linear-gradient(0deg, red, blue); /* 规范的英语的语法(务必放在最终) */   
  12. }   
  13. #grad2 {   
  14. width:300px;   
  15.     height: 50px;   
  16.     background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */   
  17.     background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */   
  18.     background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */   
  19.     background: linear-gradient(90deg, red, blue); /* 规范的英语的语法(务必放在最终) */   
  20. }   
  21. #grad3 {   
  22. width:300px;   
  23.     height: 50px;   
  24.     background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */   
  25.     background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */   
  26.     background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */   
  27.     background: linear-gradient(180deg, red, blue); /* 规范的英语的语法(务必放在最终) */   
  28. }   
  29. #grad4 {   
  30. width:300px;   
  31.     height: 50px;   
  32.     background: -webkit-linear-gradient(⑼0deg, red, blue); /* Safari 5.1 - 6.0 */   
  33.     background: -o-linear-gradient(⑼0deg, red, blue); /* Opera 11.1 - 12.0 */   
  34.     background: -moz-linear-gradient(⑼0deg, red, blue); /* Firefox 3.6 - 15 */   
  35.     background: linear-gradient(⑼0deg, red, blue); /* 规范的英语的语法(务必放在最终) */   
  36. }   
  37. </style>  
  38. </head>  
  39. <body>  
  40. <h3>线形渐变色 - 应用不一样的角度</h3>  
  41. <div id="grad1" style="color:white;text-align:center;">0deg</div><br>  
  42. <div id="grad2" style="color:white;text-align:center;">90deg</div><br>  
  43. <div id="grad3" style="color:white;text-align:center;">180deg</div><br>  
  44. <div id="grad4" style="color:white;text-align:center;">⑼0deg</div>  
  45. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  46. </body>  
  47. </html>  

 

(5)、应用好几个色调结点
 
下面的案例演试了怎样设定好几个色调结点:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6. width:300px;   
  7.     height:80px;   
  8.     background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */   
  9.     background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */   
  10.     background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */   
  11.     background: linear-gradient(red, green, blue); /* 规范的英语的语法(务必放在最终) */   
  12. }   
  13. #grad2 {   
  14. width:300px;   
  15.     height:80px;   
  16.     background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */   
  17.     background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */   
  18.     background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */   
  19.     background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 规范的英语的语法(务必放在最终) */   
  20. }   
  21. #grad3 {   
  22. width:300px;   
  23.     height:80px;   
  24.     background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */   
  25.     background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */   
  26.     background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */   
  27.     background: linear-gradient(red 10%, green 85%, blue 90%); /* 规范的英语的语法(务必放在最终) */   
  28. }   
  29. </style>  
  30. </head>  
  31. <body>  
  32. <h4>3 个色调结点(匀称遍布)</h4>  
  33. <div id="grad1"></div>  
  34. <h4>7 个色调结点(匀称遍布)</h4>  
  35. <div id="grad2"></div>  
  36. <h4>3 个色调结点(不匀称遍布)</h4>  
  37. <div id="grad3"></div>  
  38. <p><strong>留意:</strong> 当未特定百分比时,色调结点不容易全自动匀称遍布。</p>  
  39. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  40.     
  41. </body>  
  42. </html>  

 
 
(6)、应用全透明度(Transparency)
 
CSS3 渐变色也适用全透明度(transparency),能用于建立变弱变淡的实际效果。以便加上全透明度,大家应用 rgba() 涵数来界定色调结点。rgba() 涵数中的最终1个主要参数能够是从 0 到 1 的值,它界定了色调的全透明度:0 表明彻底全透明,1 表明彻底不全透明。
 
下面的案例演试了从左侧刚开始的线形渐变色。起始点是彻底全透明,渐渐地过渡到彻底不全透明的鲜红色:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6. width:500px;   
  7.     height: 200px;   
  8.     background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */   
  9.     background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */   
  10.     background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */   
  11.     background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 规范的英语的语法(务必放在最终) */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>线形渐变色 - 全透明度</h3>  
  17. <p>以便加上全透明度,大家应用 rgba() 涵数来界定色调结点。rgba() 涵数中的最终<br>1个主要参数能够是从 0 到 1 的值,它界定了色调的全透明度:0 表明彻底全透明,<br>1 表明彻底不全透明。</p>  
  18. <div id="grad1"></div>  
  19. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  20. </body>  
  21. </html>  
     

 
(7)、反复的线形渐变色
 
 repeating-linear-gradient() 涵数用于反复线形渐变色:

XML/HTML Code拷贝內容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <style>  
  5. #grad1 {   
  6. width:400px;   
  7.     height: 200px;   
  8.     background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */   
  9.     background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */   
  10.     background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */   
  11.     background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 规范的英语的语法(务必放在最终) */   
  12. }   
  13. </style>  
  14. </head>  
  15. <body>  
  16. <h3>反复的线形渐变色</h3>  
  17. <div id="grad1"></div>  
  18. <p><strong>留意:</strong> Internet Explorer 9 及以前的版本号不适用渐变色。</p>  
  19. </body>  
  20. </html>  

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。