Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 亚洲精品美女在线观看,98bb国产精品视频,国产免费爽爽视频免费可以看 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS3 漸變（Gradients）大全-第一章
          
        
           
          
	
	
          
		
                        
          SS3 漸變（gradients）可以讓你在兩個或多個指定的顏色之間顯示平穩的過渡。
          以前，你必須使用圖像來實現這些效果。但是，通過使用 CSS3 漸變（gradients），你可以減少下載的事件和寬帶的使用。此外，漸變效果的元素在放大時看起來效果更好，因為漸變（gradient）是由瀏覽器生成的。
          CSS3 定義了兩種類型的漸變（gradients）：
          • 線性漸變（Linear Gradients）- 向下/向上/向左/向右/對角方向
          • 徑向漸變（Radial Gradients）- 由它們的中心定義
          瀏覽器支持
          表中的數字指定了完全支持該屬性的第一個瀏覽器版本。
          后邊跟 -webkit-、-moz- 或 -o- 的數字指定了需加上前綴才能支持屬性的第一個版本。
          屬性
          linear-gradient10.026.0
          10.0 -webkit-
          		16.0
          3.6 -moz-
          		6.1
          5.1 -webkit-
          		12.1
          11.1 -o-
          radial-gradient10.026.0
          10.0 -webkit-
          		16.0
          3.6 -moz-
          		6.1
          5.1 -webkit-
          		12.1
          11.6 -o-
          repeating-linear-gradient10.026.0
          10.0 -webkit-
          		16.0
          3.6 -moz-
          		6.1
          5.1 -webkit-
          		12.1
          11.1 -o-
          repeating-radial-gradient10.026.0
          10.0 -webkit-
          		16.0
          3.6 -moz-
          		6.1
          5.1 -webkit-
          		12.1
          11.6 -o-
          CSS3 線性漸變
          為了創建一個線性漸變，你必須至少定義兩種顏色結點。顏色結點即你想要呈現平穩過渡的顏色。同時，你也可以設置一個起點和一個方向（或一個角度）。
          線性漸變的實例：
          語法
          background: linear-gradient(direction, color-stop1, color-stop2, ...);
          線性漸變 - 從上到下（默認情況下）
          下面的實例演示了從頂部開始的線性漸變。起點是紅色，慢慢過渡到藍色：
          <!DOCTYPE html>
          <html>
          <head>
          <meta charset="UTF-8">
          <title></title>
          <style type="text/css">
          #btn{
          height:200px;
          background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
          background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
          background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
          background:linear-gradient(red, blue); /* 標準的語法（必須放在最后） */
          }
          </style>
          </head>
          <body>
          <div id="btn"></div>
          </body>
          </html>
          性漸變:
          CSS3可以讓背景產生漸變效果,漸變屬性有兩種,即linear-gradient(線性漸變)和radial-gradient(圓形漸變),語法如下
          background: linear-gradient(direction, color-stop1, color-stop2, ...);
          linear-gradient(漸變方向,色彩1,位置1,色彩2,位置2...)
          對于線性漸變的方向,只要設置起點即可,例如top表示由上至下,left表示由左到右,top left表示由左上到右下,也可以用角度來表示,
          例如45o表示左下到右上,-45o表示左上到右下。 角度等同于鐘表: 12點: 0deg 3點: 90deg 6點: 180deg 9點: 270deg
          IE10以下的瀏覽器不支持此語法, 建議使用chrome瀏覽器或其他瀏覽器來瀏覽下面的范例
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 800px;
    height: 300px;
    margin: 0 auto;
    border: 1px solid #000;

    /*線性漸變*/
    /*background-image: linear-gradient(方向(從上到下),顏色1,顏色2,顏色3····);*/
    /*background-image: linear-gradient(to right bottom,red,blue);*/
    /*background-image: linear-gradient(45deg,red,blue,pink,green,orange);*/



    /*復雜演示 color1 stop,color2 stop,*/
    background-image: linear-gradient(90deg,red 50%,blue 90%,pink,green,orange);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
          徑向漸變
          background: radial-gradient(center, shape size, start-color, ..., last-color);
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    border-radius: 50%;
    margin: 0 auto;

    /*由中心向四周漸變*/
    background-image: radial-gradient(blue 100px,red);
    background-image: radial-gradient(orange,yellow,#fff,transparent);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
          重復的線性漸變
          repeating-linear-gradient() 函數用于重復線性漸變：
          <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
    margin: 0;
    padding: 0;
}
div{
    width: 400px;
    height: 400px;
    margin: 100px auto;
    border-radius: 50%;
    border: 1px solid red;

    background-image: repeating-radial-gradient(#fff 0px,#fff 10px,#000 10px,#000 20px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

          我們可以使用漸變工具來生成gradient語法
          Ultimate CSS Gradient Generator
          網址：http://www.colorzilla.com/gradient-editor/
          Orientation: 漸變方向
          錐漸變類似于徑向漸變。兩者都是圓形的，并且使用元素的中心作為顏色的源點。徑向漸變的顏色從圓的中心中心輻射，而圓錐漸變是圍繞一個中心點旋轉。
          它們被稱為“圓錐形”，因為它們從上面看起來像的圓錐形。比如可以使用圓錐漸變制作餅圖或色輪。
          語法如下：
          background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
          參數說明：
          值
          描述
          from angle
          可選。起始角度。默認值為 0deg
          at position
          可選。中心位置。默認居中。
          color degree, ..., color degree
          角漸變斷點。該值包含一個顏色值，后跟一個可選的停止位置（ 0 到 360 之間的度數或 0% 到 100% 之間的百分比）。
          最基礎的圓錐漸變
          這是一個沒有設置任何屬性的，只聲明了2中顏色的漸變，如下示例：
          .gradient {
  background-image: conic-gradient(blue, red);
} 
          設置漸變角度
          默認漸變的角度是0，正值時，會沿著順時針方向，負值相反方向，如下示例：
          .gradient {
  /* 一個旋轉 45 度的錐形漸變，從藍色漸變到紅色 */
  background-image: conic-gradient(from 45deg, blue, red);
} 
          45度漸變
          如下圖是-45deg時，漸變按逆時針方向。
          -45度漸變
          設置漸變的中心點
          使用 at 語法，比如 at left ，at top left ，at 0 0(左上角)等設置中心點的位置,如下示例：
          /* 一個藍紫色框：從藍色漸變到紅色，但只有右下象限可見，因為錐形漸變的中心位于左上角 */
conic-gradient(from 90deg at 0 0, blue, red);
          at 0px 0px
          此時，是否還是不太明白，我們可以繼續改變中心點的位置，比如設置中心點距離左邊50px 距離上邊50px，如下示例：
          .gradient {
  /* 錐形漸變的中心位于距離左上角各50px */
background:conic-gradient(from 90deg at 50px 50px, blue, red);
} 
          at 50px 50px
          我們繼續，當中心點設置為 at left 什么效果？
          background:conic-gradient(from 90deg at left, blue, red);
          at left
          是不是很有意思，你可以嘗試設置其它的值，看看中心點的位置是什么樣的。
          設置顏色的結束位置
          和徑向漸變一樣，你可以設置顏色的結束位置，不同的地方是圓錐漸變的只能使用角度 deg、梯度 grad、弧度 rad和圈 turn這幾個單位。
          如下示例：
          /*使用角度*/
.gradient {
background:conic-gradient(red 0deg, orange 90deg, yellow 180deg, green 270deg, blue 360deg);
} 
          /*使用梯度grad*/
.gradient {
background:conic-gradient(red 40grad, 80grad, blue 360grad);
} 
          /*使用弧度 rad*/
.gradient {
background:conic-gradient(red .8rad, yellow .6rad, blue 1.3rad);
} 
          /*使用圈 turn*/
.gradient {
background:conic-gradient(#fff 0.09turn, #bbb 0.25turn, #666 0.6turn);
} 
          關于各種單位的具體介紹可以參考這里：https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient
          制作一個色輪
          使用圓錐漸變可以制作一個色輪，如下示例：
          html:
          <div class="gradient"></div>
          css:
          div{
  width:200px;
  height:200px;
  border-radius:200px;
}
.gradient {
   /* 色輪 */
  background: conic-gradient(
      hsl(360, 100%, 50%),
      hsl(315, 100%, 50%),
      hsl(270, 100%, 50%),
      hsl(225, 100%, 50%),
      hsl(180, 100%, 50%),
      hsl(135, 100%, 50%),
      hsl(90, 100%, 50%),
      hsl(45, 100%, 50%),
      hsl(0, 100%, 50%)
  );
} 
          效果：
          色輪
          制作一個餅圖
          通過上面的色輪示例，在結合之前學習線性或徑向漸變時改變顏色結束位置的知識，是否對如何制作一個餅圖有了思路。如下示例：
          html:
          <div class="gradient"></div>
          css:
          div{
  width:200px;
  height:200px;
  border-radius:200px;
}
.gradient {
background:conic-gradient(
  #ff00ff,
  #ffff00 0deg 60deg,
  #00ffff 60deg 120deg,
  #66ff66 120deg 180deg,
  #000066 180deg 240deg, 
  #ff0033 240deg 300deg, 
  #850244 300deg);
} 
          效果：
          餅圖
          最后
          到此已經介紹了圓錐漸變的使用方法，使用圓錐漸變可以制作很多特效，比如餅圖，非常實用，本篇作為入門介紹，難免有誤，不夠詳細，所以關于其詳細的內容原理可以參考下面的參考資料：
          https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients
          https://css-tricks.com/a-complete-guide-to-css-gradients/
          下面將會繼續介紹其它漸變的使用方法，你可以關注我，繼續學習其它漸變知識。
          其它相關文章：
          • css 線性漸變
          • css 徑向漸變
          • css 圓錐漸變
          • css 重復漸變
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产精品一区二区久久不卡|
久久综合九九亚洲一区|
色狠狠AV一区二区三区|
日本福利一区二区|
精品一区二区三区在线成人|
精品国产一区二区三区2021|
亚洲码欧美码一区二区三区|
无码人妻AⅤ一区二区三区|
久99精品视频在线观看婷亚洲片国产一区一级在线
|
精品少妇一区二区三区在线|
中文字幕日韩一区二区不卡|
日韩人妻不卡一区二区三区|
激情内射日本一区二区三区|
国产亚洲综合一区二区三区|
亚洲熟女www一区二区三区|
3d动漫精品一区视频在线观看|
国产自产V一区二区三区C
|
日韩一区二区在线播放|
久久久91精品国产一区二区|
国产精品无码一区二区三区电影|
精品一区二区三区免费观看|
免费人妻精品一区二区三区|
国产日韩精品一区二区在线观看|
濑亚美莉在线视频一区|
国产精品久久久久久一区二区三区|
精品国产伦一区二区三区在线观看|
精品无码一区二区三区爱欲九九
|
天堂va在线高清一区|
国产精品夜色一区二区三区
|
亚洲日韩AV一区二区三区四区|
日韩在线不卡免费视频一区|
无码少妇一区二区三区|
中文字幕一区视频|
亚洲一区二区观看播放|
韩国女主播一区二区|
亚洲av区一区二区三|
国产精品丝袜一区二区三区|
99精品一区二区三区|
色婷婷香蕉在线一区二区|
国产激情一区二区三区四区|
国产精品一区二区三区99|