目錄
线性渐变
径向渐变
多色渐变
重复渐变
兼容性
总结
首頁 web前端 html教學 CSS3 gradient介绍_html/css_WEB-ITnose

CSS3 gradient介绍_html/css_WEB-ITnose

Jun 21, 2016 am 08:46 AM

今天出去吃饭,饭后搞活动送了个小礼品。礼品本身不值一提,重要的的是渐变。本篇就介绍并实际做一下这个渐变效果。

渐变gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

线性渐变

W3C标准语法:linear-gradient(angle, color… color);。第一个参数指明渐变方向,0deg表示渐变从下往上,90deg表示渐变从左往右,180deg表示渐变从上往下,270deg表示渐变从右往左。其实就是顺时针走一圈。你也可以用to + 关键字,例如to top等于0deg,to right等于90deg,to bottom等于180deg,to left等于270deg。第二参数是起始颜色,中间可以指定多个颜色,依次渐变,最后一个参数是终止颜色。权威请参照W3C

先看简单的,就2个颜色,从白到黑渐变。图1代码linear-gradient(0deg, #fff, #000);或linear-gradient(to top, #fff, #000);,代码根据表题依次类推,一图胜千言

新版浏览器用W3C的标准语法没问题,但低版本可能尚不支持W3C的标准语法,此时你需要使用各浏览器私有的语法。当然如果你的页面不准备继续支持这些低版本的浏览器的话,此段可以略过。

Webkit引擎(Chrome和Safari),Genko引擎(Firefox),Presto引擎(Opera),Trident引擎(IE)的私有语法和和W3C的标准语法非常像。区别如下:

  1. 需要加上前缀,分别是-webkit-,-moz-,-ms-
  2. -webkit-,-ms-的第一个参数的关键字表示起始位置,因此不需要加to。例如-webkit-linear-gradient(top, #fff, #000);等价于W3C标准语法的linear-gradient(to bottom, #fff, #000);
  3. -moz-的第一个参数的关键字可以可不加to。不加to表示起始位置,加to表示终止位置。例如-moz-linear-gradient(top, #fff, #000);等价于-moz-linear-gradient(to bottom, #fff, #000);
  4. IE10以下是不支持渐变的…因此没有私有语法
  5. Opera从37开始支持,试了下并没有私有语法,加上-o-前缀反而不认…

另外Webkit引擎(Chrome和Safari)的旧版本还支持一种更旧的私有语法,即旧版本的Webkit引擎的浏览器有两种私有语法。旧语法:-webkit-gradient(type, point, point, color, color)。第一个参数type指明linear线性渐变或radial径向渐变。第二三参数分别是渐变的起点坐标和终点坐标。第四五参数是color-stop函数来表示起始和终止颜色。color-stop()支持两个参数,第一个是点的位置,第二个是颜色,例如color-stop(0.5, #fff)表示在渐变范围的中心处有个黑色的过渡色。具体你可以参照这里

为缩减篇幅,下面仍以介绍W3C标准语法为主。

上面的例子是2个颜色渐变,现在试试指定多个颜色间依次渐变。例如linear-gradient(to bottom, yellow, #9C117A, #EF137A, #f00);

上面指定了4个颜色,等比例依次渐变,但有时我们需要自己控制渐变的比例,可以在色彩后面追加%百分比。例如linear-gradient(to bottom, yellow 0%, #9C117A 20%, #EF137A 80%, #f00 100%);第一个颜色位于0%处,第二个颜色位于20%处,第三个颜色位于80%处,最后一个颜色位于100%处。

径向渐变

线性渐变是沿着一条直线渐变,而径向渐变是圆形或椭圆形渐变。相比之下稍微复杂一点。

W3C标准语法:radial-gradient(position, shape, size, color-stop);

第一个参数size at position。size指定水平半径和垂直半径。position指明圆心位置,默认值center表示元素中心为渐变的圆心。同样可以指定为top,right,bottom,left,也可以自定义px值或%百分比,对应关系如下。

size和position用at连接。例如20px 50px at center,表示以元素中心点为圆心,20px为水平半径,50px为垂直半径的椭圆型渐变。具体效果见下图的第一,二行。

第二个参数size shape。shape可设circle,ellipse。看名字就知道了,前者表示圆形渐变,后者表示椭圆形渐变。

如果shape设成circle,那size的px值就是圆形半径,但不能用%百分比。例如40px circle表示半径为40px的圆型渐变。

如果shape设成ellipse,那size的值分别为椭圆的水平半径和垂直半径。可以用%百分比。例如30% 80% ellipse表示水平半径30%(相对于元素的宽),垂直半径80%(相对于元素的高)的椭圆型渐变。具体效果见下图的第三行。

前两个参数可以合并成size shape at position。例如100px 60px ellipse at right表示圆心在右中位置,水平半径100px,垂直半径60px的椭圆渐变。效果见下图第9单元格。

上面的size除了设px值或%百分比外,还有预定义好的关键字closest-side,closest-corner,farthest-side,farthest-corner(默认值)。看名字也能猜出意思,例如默认值farthest-corner表示渐变半径为从圆心到离圆心最远的角落。效果见下图第4行各单元格。

第四个参数color-stop()函数,在线性渐变里有介绍,不赘述。

效果图如下,表行就是radial-gradient的参数:

多色渐变

上面的渐变都只设了两个颜色,一个起始一个终止。其实可以设多个颜色达到多色渐变的效果。例如,左图线性渐变模拟日出效果,右图径向渐变模拟太阳。纯CSS实现,毫无PS痕迹。

//左图日出background-image: linear-gradient(to bottom, #071B26 0%, #071B26 30%, #8A3B12 80%, #240E03 100%);//右图太阳background-image: radial-gradient(circle,red,orange,#071B26);
登入後複製

重复渐变

CSS3之前想要对background-image实现重复渐变需要配合background-repeat,但也仅限于重复线性渐变,无法重复径向渐变。CSS3提供了repeating-linear-gradient和repeating-radial-gradient便捷地实现重复渐变。例如

//重复线性渐变background-image: repeating-linear-gradient(red,green 40px, orange 80px);//重复径向渐变background-image: repeating-radial-gradient(black 10px,black 20px,#2a2a2a 30px,#2a2a2a 40px);
登入後複製

兼容性

目前gradient在众多浏览器上表现不错,但有些低端浏览器上会出现一些兼容性的问题。我的建议是放弃它们吧,低端浏览器活不过今年。况且渐变毕竟属于渐进增强,即使没有渐变效果也不影响用户的实际使用。

但有时人在江湖身不由己,想象一下和河马们或客户们解释浏览器的占有率,解释渐进增强是件多么累人的事吧。况且你心里很清楚,懂的人不需要解释,不懂的人解释了也没用。所以你可以考虑以下方案模拟出gradient效果:

  1. 最简单的方式就是直接PS出一张图片,虽然多了一次HTTP请求,但你不说谁知道呢^_^
  2. 使用脚本,例如PIE脚本等。但会通过JS对HTML结构进行调整,尤其涉及定位时,bug调试起来真的比较麻烦。
  3. 对低端IE使用滤镜

总结

不忘初心方得始终,来模拟实先一下小礼品的图标(色彩可能做不到完全一致):

.priv_icon_coupon {    width: 70px;    height: 70px;    border-radius: 0.3em;    border:3px solid #fff;    background-image: linear-gradient(to bottom, #EF137A, #9C117A);    font: 50px/64px "微软雅黑";    color: #fff;    text-align: center;    text-shadow: 0 1px rgba(0,0,0,.5);}<span class="priv_icon_coupon">禮</span>
登入後複製

网上也有很多牛人做的渐变效果,如Lea Verou

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

See all articles