久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      漸變是css3新增的嗎

      漸變是css3新增的圖片類型,用來代替圖片。CSS3定義了兩種類型的漸變:1、線性漸變,使用“l(fā)inear-gradient()”函數(shù)定義;2、徑向漸變,使用“radial-gradient()”函數(shù)定義。

      漸變是css3新增的嗎

      本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

      作為CSS3新增的屬性,漸變也有著無窮的潛力。

      一、簡介

      ??漸變是CSS3新增的圖片類型,用來代替圖片,它的好處有:

      • 加快頁面的加載速度,減少帶寬的占用;
      • 更加靈活。

      CSS3 定義了兩種類型的漸變(gradients):

      • 線性漸變(Linear Gradients)- 向下/向上/向左/向右/對角方向

      • 徑向漸變(Radial Gradients)- 由它們的中心定義

      二、線性漸變

      ??其實漸變的使用也挺常見的,例如導航欄:

      background-image: linear-gradient(90deg,#0af,#0085ff)

      ??很顯然,這比純色的背景好看太多了。

      ??當然,有時間我們并不需要過渡效果:

          background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);

      ??對于線性漸變,除了linear-gradient,還有repeating-linear-gradient:

          $c1: #fff;     $c2: #DF5646;     $c3: #1C78A4;     background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px);

      ??由此可見,漸變并沒有那么簡單。

      ??這里肯定有人要問,還能玩出什么花樣?首先我們要明白漸變是一種圖片,那么再想想還有什么與圖片一起使用的CSS屬性?

          $color: #122556;     background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%),                       linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%);     background-size: 30px 30px;

      ??通過這個例子,是不是使用漸變的思路更加開闊了。不過這里還需要注意一點:

      • 當你聲明多個漸變時,最先聲明的,離用戶越近。(這里就需要我們考慮遮蓋的問題,一般采用transparent);

      ??同樣,漸變也可以做動畫

          @mixin menuaction($color) {         background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%;         &:hover {             background-size: 100% 100%;             color: #fff;         }     }

      三、徑向漸變

      徑向漸變由它的中心定義。

      為了創(chuàng)建一個徑向漸變,你也必須至少定義兩種顏色節(jié)點。顏色節(jié)點即你想要呈現(xiàn)平穩(wěn)過渡的顏色。同時,你也可以指定漸變的中心、形狀(圓形或橢圓形)、大小。默認情況下,漸變的中心是 center(表示在中心點),漸變的形狀是 ellipse(表示橢圓形),漸變的大小是 farthest-corner(表示到最遠的角落)。

      語法

      background-image: radial-gradient(shape size at position, start-color, ..., last-color);
      描述
      shape 確定圓的類型:

      • ellipse (默認): 指定橢圓形的徑向漸變。
      • circle :指定圓形的徑向漸變
      size 定義漸變的大小,可能值:

      • farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角
      • closest-side :指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
      • closest-corner : 指定徑向漸變的半徑長度為從圓心到離圓心最近的角
      • farthest-side :指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
      position 定義漸變的位置??赡苤担?/p>
      • center(默認):設置中間為徑向漸變圓心的縱坐標值。
      • top:設置頂部為徑向漸變圓心的縱坐標值。
      • bottom:設置底部為徑向漸變圓心的縱坐標值。
      start-color, …, last-color 用于指定漸變的起止顏色。

      示例:

      <!DOCTYPE html> <html> <head> <meta charset="utf-8">  <style> #grad1 {     height: 150px;     width: 200px;     background-color: red; /* 瀏覽器不支持的時候顯示 */     background-image: radial-gradient(red, yellow, green); /* 標準的語法(必須放在最后) */ }  #grad2 {     height: 150px;     width: 200px;     background-color: red; /* 瀏覽器不支持的時候顯示 */     background-image: radial-gradient(circle, red, yellow, green); /* 標準的語法(必須放在最后) */ } </style> </head> <body>  <h3>徑向漸變 - 形狀</h3>  <p><strong>橢圓形 Ellipse(默認):</strong></p> <div id="grad1"></div>  <p><strong>圓形 Circle:</strong></p> <div id="grad2"></div>  <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持漸變。</p>  </body> </html>

      漸變是css3新增的嗎

      四、總結(jié)

      ??最后以什么結(jié)束呢,哈哈最近各種優(yōu)惠券,那我們用漸變的知識來搞張優(yōu)惠券吧:

      <!DOCTYPE html> <html> 	<head> 		<meta charset="utf-8"> 		<style> 			div { 				width: 300px; 				height: 120px; 				background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, 					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, 					radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, 					linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px); 				background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%; 				background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center; 			} 		</style> 	</head> 	<body> 		<div></div> 	</body> </html>

      漸變是css3新增的嗎

      (學習視頻分享:css視頻教程)

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號