站長資訊網(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新增的嗎

        四、總結

        ??最后以什么結束呢,哈哈最近各種優(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號
        主站蜘蛛池模板: 91麻豆精品国产91久久久久久| 无码国内精品久久人妻蜜桃| 西瓜精品国产自在现线| 精品无码人妻一区二区三区| 国产一区二区三区欧美精品| 国内精品久久久久久99| 亚洲欧美日韩国产成人精品影院| 中国精品videossex中国高清| 日韩人妻无码精品久久久不卡 | 国产乱子伦精品无码专区| 国产短视频精品一区二区三区| 亚洲热线99精品视频| 久久精品亚洲精品国产欧美| 国产精品免费大片一区二区| 欧美精品免费在线| 国产精品嫩草视频永久网址| 国产乱子伦精品无码码专区| 亚洲av无码精品网站| 亚洲午夜福利精品久久| 亚洲精品岛国片在线观看| 无码国模国产在线无码精品国产自在久国产 | 99熟女精品视频一区二区三区 | 久久国产精品一区| 国产乱子伦精品无码专区| 国产精品手机在线观看你懂的 | 亚洲韩精品欧美一区二区三区| 鲸鱼传媒绿头鱼实验室之炮机测评日韩精品一级毛 | 精品国产一区二区三区久久久狼| 麻豆亚洲AV永久无码精品久久| 亚洲精品国精品久久99热一| 亚洲国产精品尤物YW在线观看| 亚洲国产欧美日韩精品一区二区三区 | 精品国产福利久久久| 国产AV国片精品| 国产91精品在线观看| 国产精品高清视亚洲精品| 精品国产一区二区三区久久| 久久99国产精品久久| 97久人人做人人妻人人玩精品| 白浆都出来了视频国产精品| 国产99久久九九精品无码|