《CSS3實戰》--漸變設計

時間  2019-11-29
標籤 CSS3實戰 漸變 設計 欄目 CSS 简体版
原文   原文鏈接

這篇文章主要介紹了《CSS3實戰》筆記--漸變設計（一,須要的朋友能夠參考下javascript

基於CSS的漸變與圖片漸變相比，最大的優勢是便於修改，同時支持無級縮放，過渡更加天然。目前，實現CSS漸變的只有基於Webkit和Gecko引擎的瀏覽器，基於Presto引擎的Opera瀏覽器暫時不支持漸變，基於Trident的IE雖然能夠經過濾鏡的方式實現，但並不提倡。css

Webkit引擎（Safari 4及以上版本）的CSS漸變設計html

基本語法：vue

-webkit-gradient(<type>,<point>[,<radius>]?,<point>[,<radius>]?[,<stop>]*)</pre>java

參數說明：node

<type>:定義漸變類型，包括線性漸變（linear）和徑向漸變（radial）。webpack

<point>:定義漸變起始點和結束點座標，即開始應用漸變的x軸和y軸座標，以及結束漸變的座標。該參數支持數值，百分比和關鍵字，如（0，0）或者（left，top）等。關鍵字包括top，bottom，left和right。web

<radius>:當定義徑向漸變時，用來設置徑向漸變的長度，該參數爲一個數值。面試

<stop>:定義漸變色和步長。包括三個類型值，即開始的顏色，使用from （color value）函數定義；結束的顏色，使用to（color value）函數定義：顏色步長，使用color-stop（value，color value）定義。color-stop（）包含兩個參數值，第一個參數值爲一個數值或者百分比值，取值範圍爲01.0（或者0%100%），第二個參數值表示任意顏色值。瀏覽器

直線漸變基本用法：

/*簡單的線性漸變背景色，從頂部到底部，從藍色向紅色漸變顯示*/** background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red));</pre>

演示效果：


/*從頂部到中間，再從中間到底部，從藍色到綠色，再到紅色漸變顯示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red), color-stop(50%, green));</pre>

演示效果：


/*設計二重漸變，從頂部到底部，先是從藍色到白色漸變顯示，再從黑色到紅色漸變顯示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.5, #fff), color-stop(0.5, #000));</pre>

演示效果：


/*經過設置不一樣的步長值，從而設計多重漸變效果，從頂部到底部，先是從藍色到白色漸變，再從百色到黑色漸變，最後是從黑色到紅色漸變顯示*/ background: -webkit-gradient(linear, left top, left bottom, from(blue), to(red),color-stop(0.4, #fff), color-stop(0.6, #000));</pre>

演示效果：


小結：color-stop（）函數包含兩個參數值，第一個參數值指定角標位置，第二個參數指定色標顏色。一個漸變能夠包含多個色標，位置值爲01之間的小數，或者0100%之間的百分數，指定色標的位置比例。

徑向漸變的基本用法

/*同心圓（圓心座標爲200，100），內圓半徑爲10，外圓半徑爲100，內圓小於外圓半徑，從內圓紅色到外圓綠色徑向漸變，超過外圓半徑顯示爲綠色，內圓顯示紅色*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green));</pre>

效果顯示：


/*同心圓（圓心座標爲200，100），內圓半徑爲100，外圓半徑爲100，內圓小於外圓半徑，從內圓紅色到外圓綠色徑向漸變。當內圓和外圓半徑相等時，則漸變無效*/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 100, from(red), to(green));</pre>

演示效果：


/*同心圓（圓心座標爲200，100），內圓半徑爲100，外圓半徑爲10，內圓大於外圓半徑，從內圓紅色到外圓綠色徑向漸變，超出內圓半徑顯示爲紅色，外圓顯示綠色*/ background: -webkit-gradient(radial, 200 100, 100, 200 100, 10, from(red), to(green));</pre>

**演示效果： **


/*非同心圓，內圓圓心和外圓圓心的距離小於兩圓半徑的差，則顯示上圖效果，呈現錐形徑向漸變效果。錐形的尖銳性與兩圓圓心距離成正比*/ background: -webkit-gradient(radial, 120 100, 10, 200 100, 100, from(red), to(green));</pre>

演示效果：


/*同心圓，在內圓到外圓中間90%的位置，即距離外環內添加一個藍色色標，設計多層徑向漸變，以下圖所示。*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(red), to(green), color-stop(90%, blue));</pre>

演示效果：


/*經過設置to()函數的顏色值爲透明，能夠設計發散的圓形效果*/ background: -webkit-gradient(radial, 200 100, 10, 200 100, 90, from(red), to(rgba(1,159,98,0)));</pre>

演示效果：


/*經過設置to（）函數的顏色值爲透明，同時設計類似色，能夠設計球形效果*/ background: -webkit-gradient(radial, 180 80, 10, 200 100, 90, from(#00C), to(rgba(1,159,98,0)), color-stop(98%, #0CF));</pre>

演示效果：


/*經過爲背景圖定義多個徑向漸變，能夠設計多個氣泡效果，以下圖所示*/ background: -webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)), -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)), -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)), -webkit-gradient(radial, 300 110, 10, 300 100, 100, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700)); -webkit-background-origin: padding-box; -webkit-background-clip: content-box;</pre>

演示效果：


漸變應用定義漸變效果的邊框

代碼：

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
`<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
`<``head``>`
`<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
`<``title``>Webkit引擎的漸變實現方法</``title``>`
`<``style` `type``=``"text/css"``>`
`div {`
`border-width: 20px;`
`width: 400px;`
`height: 200px;`
`margin: 20px;`
`-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 20;`
`}`
`</``style``>`
`</``head``>`
`<``body``>`
`<``div``></``div``>`
`</``body``>`
`</``html``>`
複製代碼

演示效果：


定義填充內容效果

代碼：

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
`<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
`<``head``>`
`<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
`<``title``>Webkit引擎的漸變實現方法</``title``>`
`<``style` `type``=``"text/css"``>`
`.div1 {`
`width:400px;`
`height:200px;`
`border:10px solid #A7D30C;`
`background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));`
`float:left;`
`}`
`.div1::before {`
`width:400px;`
`height:200px;`
`border:10px solid #019F62;`
`content: -webkit-gradient(radial, 200 100, 10, 200 100, 100, from(#A7D30C), to(rgba(1, 159, 98, 0)), color-stop(90%, #019F62));`
`display: block;`
`}`
`</``style``>`
`</``head``>`
`<``body``>`
`<``div` `class``=``"div1"``>透視框</``div``>`
`</``body``>`
`</``html``>`
複製代碼

顯示效果：


定義列表圖標

`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)">`
`<``html` `xmlns``=``"[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)"``>`
`<``head``>`
`<``meta` `http-equiv``=``"Content-Type"` `content``=``"text/html; charset=utf-8"` `/>`
`<``title``>Webkit引擎的漸變實現方法</``title``>`
`<``style` `type``=``"text/css"``>`
`ul {`
`list-style-image: -webkit-gradient(radial, center center, 4, center center, 8, from(#ff0000), to(rgba(0, 0, 0, 0)), color-stop(90%, #dd0000))`
`}`
`</``style``>`
`</``head``>`
`<``body``>`
`<``ul``>`
`<``li``>新聞列表項1</``li``>`
`<``li``>新聞列表項2</``li``>`
`<``li``>新聞列表項3</``li``>`
`<``li``>新聞列表項4</``li``>`
`</``ul``>`
`</``body``>`
`</``html``>`
複製代碼

演示效果：


二

Gecko引擎的CSS漸變設計直線漸變基本語法

-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)
複製代碼

參數說明：

<point>:定義漸變起始點，取值包含數值，百分比，也可使用關鍵字，其中left，center 和 right 關鍵字定義 x 軸座標，top，center 和 bottom 關鍵字定義 y 軸座標。當指定一個值時，另外一個值默認爲 center 。

<angle>:定義直線漸變的角度。單位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等於2*PI rad）。

<stop>：定義步長，用法與Webkit引擎的color-stop()函數類似，可是該參數不須要調用函數，直接傳遞函數便可。其中第一個參數設置顏色，能夠爲任何合法的顏色值，第二個值設置顏色的位置，取值爲百分比（0~100%）或者數值，也能夠省略步長設置。

直線漸變的基本用法

/*最簡單的線性漸變，只須要指定開始顏色和結束顏色，則默認從上到下實施線性漸變*/ background: -moz-linear-gradient(red, blue);</pre>

演示效果：


/*從左上角到右下角的漸變，其中top關鍵字設置起點的x軸，left關鍵字設置起點的y軸座標*/ background: -moz-linear-gradient(top left,red, blue)</pre>

演示效果：


/*設置從左到右的五彩漸變，其中y軸座標默認爲center，多個色標按步長平均顯示*/ background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);</pre>

演示效果：


/*從左上角到右下角的紅色漸變，其中紅色逐漸減弱，並最終顯示爲透明*/ background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));</pre>

演示效果：


/*設置角度值*/ background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));</pre>

演示效果：


小結：當指定角度時，是沿水平線按逆時針旋轉定位的。所以，設置0deg,將產生從左向右的水平漸變，而設置90度，將建立一個從底部到頂部的漸變。

/*從上到下的多彩漸變，其中在y軸的80%的位置，添加一個綠色色標，設計三色漸變效果。若是沒有指定位置則三色會均勻分佈*/
* background: -moz-linear-gradient(top, blue, green 80%, orange);</pre>

演示效果：


/*設計漸變半透明的效果的背景圖片，在背景圖片上面覆蓋一層從左到右爲白色到透明的漸變填充層*/ background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);</pre>

演示效果：


徑向漸變的基本語法

-moz-radial-gradient([<position> || <angle>,]?[shape] || <size>,]? <syop>,<stop>[,<stop>]*)
複製代碼

該函數的參數說明：

<point>:定義漸變起始點，取值包含數值，百分比，也可使用關鍵字，其中left，center 和 right關鍵字定義x 軸座標，top，center 和 bottom 關鍵字定義 y 軸座標。當指定一個值時，則另外一個值默認爲center。

<angle>:定義直線漸變的角度。單位包括deg，grad（梯度，90度 = 100grad），rad （弧度，一圈等於2*PI rad）。

<stop>：定義步長，用法與Webkit引擎的color-stop()函數類似，可是該參數不須要調用函數，直接傳遞函數便可。其中第一個參數設置顏色，能夠爲任何合法的顏色值，第二個值設置顏色的位置，取值爲百分比（0~100%）或者數值，也能夠省略步長設置。

:定義圓半徑，或者橢圓的軸長度n

徑向漸變的基本語法

/*最簡單的徑向漸變，從中間向外由紅色，黃色到藍色漸變顯示*/ background: -moz-radial-gradient(red, yellow, blue);</pre>

演示效果：


/*最簡單的徑向漸變，從中間向外由紅色，黃色道藍色漸變顯示，並設置不一樣色標的顯示位置*/ background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);</pre>

演示效果：


/*徑向漸變，從左下角向外由紅色，黃色，藍色漸變顯示，並設置藍色色標的顯示位置*/ background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);</pre>

顯示效果：


/*徑向漸變，形狀爲圓形。從左側中間向外由紅色，黃色到藍色漸變顯示，並設置藍色色標的顯示位置*/ background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);</pre>

演示效果：


/*徑向漸變，形狀爲橢圓。從中間向外由紅色，黃色到藍色漸變顯示，並設置漸變尺寸爲cover關鍵字*/ background: -moz-radial-gradient(ellipse cover, red, yellow, blue);</pre>

演示效果：


**小結： **
size參數包含多個關鍵字，closest-side,closest-corner,farthest-side,farthest-corner,contain 和 cover。使用這些關鍵字能夠定義徑向漸變的大小。

另外，Gecko引擎還定義了-moz-repeating-linear-gradient 和-moz-repeating-radial-gradient 兩個屬性，用來定義重複直線漸變和重複徑向漸變。

background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);
複製代碼

演示效果：


background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);

演示效果：


漸變的應用

三

IE瀏覽器引擎的CSS漸變實現方法

IE並不支持CSS漸變，可是提供了漸變濾鏡，能夠用來實現簡單的漸變效果。

基本語法

該參數的參數說明以下：

enabled:設置或檢索濾鏡是否激活。可選布爾值，包括 true 和 false，默認值爲 true ，表示激活狀態。

startColor ：設置或檢索色彩漸變的開始顏色和透明度。可選項，其格式爲#AARRGGBB。AA，RR，GG，BB爲十六進制正整數，取值範圍爲00FF。RR指定紅色值，GG指定綠色值，BB指定藍色值，AA指定透明度，00是徹底透明，FF是徹底不透明。超出取值範圍的值將被恢復爲默認值。取值範圍爲#FF0000#FFFFFF，默認值爲#FF0000FF，即不透明藍色。

EndColorStr : 設置或檢索色彩漸變的結束顏色和透明度。默認值爲#FF000000，即不透明黑色。

IE 漸變濾鏡實戰應用

利用IE濾鏡設計漸變背景，而後經過背景圖像設計圖文插畫效果。

代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE瀏覽器引擎的CSS漸變實現方法</title>
<style type="text/css"> body { padding:1em;/讓漸變背景填充整個頁面/ margin:0; text-align:center; /*爲網頁設計垂直漸變背景*/ filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#9999FF, endColorStr=#ffffff); } h1 {/*標題樣式*/ color:white; font-size:18px; height:45px; line-height:65px;/*控制文本顯示位置*/ /*以絕地定位方式實現塊元素居中顯示*/ position:absolute; left:50%; margin-left:-150px; padding-left:50px; border-bottom:solid 2px #c72223; /*爲標題插入一個裝飾圖標*/ background:url(images/icon4.png) no-repeat left center; } ul {/*列表框樣式*/ /*清除列表默認樣式*/ list-style-type:none; margin:90px 0 0 0; padding:0; background:url(images/bg6.png) no-repeat right bottom;/*設計插圖背景*/ clear:both; text-align:left;/*恢復默認對齊方式*/ } li { line-height:1.5em; margin:6px auto; /*爲列表項設計個性化的列表圖標*/ font-size:14px; background:url(images/icon3.png) no-repeat left 3px; padding-left:20px; } </style>
</head>
 
<body>
<h1>喜歡是一種心情，愛是一種感覺</h1>
<ul>
 <li>有一種愛叫癡纏，好比不少人對張國榮的,有時候這樣真的挺好，沒有比愛一個故人更安全和永恆的了。</li>
 <li>有一種愛叫迷戀，某一時間裏，突然發現本身迷上某我的或某種感受，但那不會長久。有時候迷戀會轉化成愛。</li>
 <li>愛裏面必定有迷戀、有喜歡。可迷戀、喜歡都不是愛。</li>
 <li>當本身終於明白什麼是愛的時候，每每生命去了大半。人生路上能趕上一個真正愛本身的人，是機緣。</li>
 <li>有時候，愛是一瞬間的感受，愛並不能長久保留，若是兩人經營得好纔會長久保留下去。愛同時是脆弱的，愛會破碎。</li>
 <li>有時候，愛是一種心願，一種可讓本身與對方更快樂的心情。一份美好的愛一定離不開包容。</li>
 <li>有時候，愛是一種天然。花開花落，雲捲雲舒的一點沒有強求。</li>
 <li>當可以以一種平淡的心情看待感情時，愛便變得雋永。</li>
 <li>愛情有時候讓人變得很苛刻，但後來又會很包容。當愛對方超過愛本身，那愛就會很包容。</li>
 <li>喜歡一我的不會對他很苛刻，由於喜歡不會有更多的要求。相反愛倒是苛刻的。</li>
 <li>喜歡一我的不會爲她很心痛，愛卻每每是很心痛。愛是一種歸屬，喜歡沒有歸屬。</li>
 <li>在喜歡與愛的邊緣徘徊的人，若是嘗試着離開很遠，還能在某個深夜靜靜地想起他，想到心痛與流淚，那必定是愛了。</li>
 <li>在愛上以前可能有很長的喜歡，有時喜歡就能轉化成愛，有時喜歡也會淡掉。原來人與人都是平行線上的一些點，檫肩而過很日常，向左轉，向右轉，下一個路口，還會有新的風景。</li>
 <li>有時候喜歡會帶來遺憾，但愛情會帶來傷害。這種傷害最後會變成對對方一輩子的祝福。但喜歡就會愈來愈淡，最後在內心留下一個淡漠的影子。愛比喜歡要有力量。</li>
</ul>
</body>
</html>
複製代碼

本次給你們推薦一個交流圈，裏面歸納移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。對web開發技術感興趣的同窗，歡迎加入：582735936，無論你是小白仍是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時天天更新視頻資料。最後，祝你們早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程