css3 gradient 漸變

来源:http://www.cnblogs.com/nmxs/archive/2016/02/04/5181032.html
-Advertisement-
Play Games

分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。 1.線性漸變在Mozilla 下應用 語法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 參數;共三個參


分為linear-gradient(線性漸變)和radial-gradient(徑向漸變)。
1.線性漸變在Mozilla 下應用
  語法:-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
  參數;共三個參數,第一個參數表示為線性漸變的方向,top是從上往下,left 是從左到右 如果定義成left top,
  那就是從左上角到右下角。第二個和第三個參數分別是起點顏色和終點顏色。

例如:
  background: -moz-linear-gradient( top,#ccc,#000);

2.線性漸變在Webkit下的應用

  語法:-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
    //最新發佈書寫語法
      -webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
    //老式語法書寫規則
  參數:-webkit-gradient是webkit引擎對漸變的實現參數,一共有五個。第一個參數表示漸變類型(type),
    可以是linear(線性漸變)或者radial(徑向漸變)。第二個參數和第三個參數,都是一對值,分別
    表示漸變起點和終點。這對值可以用坐標形式表示,也可以用關鍵值表示,比如 left top(左上角)
    和left bottom(左下角)。第四個和第五個參數,分別是兩個color-stop函數。color-stop函數接受
    兩個參數,第一個表示漸變的位置,0為起點,0.5為中點,1為結束點;第二個表示該點的顏色。
  老式書寫方法:background: -webkit-gradient(linear,center top,center bottom,from(#ccc), to(#000));
  新式書寫方法:-webkit-linear-gradient(top,#ccc,#000);

3.線性漸變在Oper 下的應用:
  語法:-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>]);
  實例:background: -o-linear-gradient(top,#ccc, #000);

4.線性漸變在Trident(IE)下的應用
  語法:filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB);/*IE<9>*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#1471da, endColorstr=#1C85FB)";/*IE8+*/
  IE依靠濾鏡實現漸變。startColorstr表示起點的顏色,endColorstr表示終點顏色。
    GradientType表示漸變類型,0為預設值,表示垂直漸變,1表示水平漸變。

1、開始於center(水平方向)和top(垂直方向)也就是Top → Bottom:
  /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ace, #f96);
  /* Safari 4-5, Chrome 1-9 */
  /* -webkit-gradient(, [, ]?, [, ]? [, ]*) */
    background: -webkit-gradient(linear,top,from(#ace),to(#f96));
  /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ace, #f96);
  /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ace, #f96);

2、始於left(水平方向)和center(垂直方向)也是就Left → Right:
  /* Firefox 3.6+ */
    background: -moz-linear-gradient(left, #ace, #f96);
  /* Safari 5.1+, Chrome 10+ */
    background: -webkit-linear-gradient(left, #ace, #f96);
  /* Opera 11.10+ */
    background: -o-linear-gradient(left, #ace, #f96);

3、起始於left(水平方向)和top(垂直方向):
  background: -moz-linear-gradient(left top, #ace, #f96);
  background: -webkit-linear-gradient(left top, #ace, #f96);
  background: -o-linear-gradient(left top, #ace, #f96);

4、角度(Angle):
  沒有角度的示例代碼:
    background: -moz-linear-gradient(left, #ace, #f96);
    background: -webkit-linear-gradient(left,#ace,#f96);
    background: -o-linear-gradient(left, #ace, #f96);
  加上30度的角度代碼:
    background: -moz-linear-gradient(left 30deg, #ace, #f96);
    background: -webkit-gradient(linear, 0 0, 100% 100%, from(#ace),to(#f96));
    background: -o-linear-gradient(30deg, #ace, #f96);


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 官方文檔:http://zetcode.com/gui/pyqt4/ 中文文檔:http://www.qaulau.com/books/PyQt4_Tutorial/index.html 先記錄簡單的,以下代碼可顯示一個基本的window: #!/usr/bin/python # -*- codin
  • 有了以上的基本基礎,已經上面寫的幾個小練習,大家肯定有很多的不滿,比如查詢為什麼查詢一次就退出了呢?下麵我們來學習條件語句 一、萬惡的加號 以前我們在print的時候如果要加上變數都有是使用+來作為連接,但是這樣做是不好的 因為在使用加號的時候,會在記憶體中開闢新的記憶體地址來存放新的內容這樣做的壞處就
  • 獲取【下載地址】 QQ: 313596790 【免費支持更新】支持三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體A 代碼生成器(開發利器); 增刪改查的處理類,service層,mybatis的xml,SQL( mysql 和oracle)腳本, jsp頁面
  • 觀察者模式 定義了對象之間的一對多依賴,這樣一來,當一個對象改變狀態時,它的所有依賴者都會收到通知並自動更新。 觀察者模式需要實現兩個介面。observable(可觀察者)和observer(觀察者)。 observable定義了三個方法:register、remove、notify observe
  • 設計目標 儘量快的處理命令和事件,保證吞吐量; 處理完一個命令後不需要等待命令產生的事件持久化完成就能處理下一個命令,從而保證領域內的業務邏輯處理不依賴於持久化IO,實現真正的in-memory; 保證命令、事件處理的順序性,先來的先處理,先產生的先處理; 保證一個聚合根的事件只有一個線程在持久化,
  • 獲取【下載地址】 QQ: 313596790 【免費支持更新】支持三大資料庫 mysql oracle sqlsever 更專業、更強悍、適合不同用戶群體A 代碼生成器(開發利器); 增刪改查的處理類,service層,mybatis的xml,SQL( mysql 和oracle)腳本, jsp頁面
  • 最近做iOS開發的過程中, 發現要涉及到JS和原生OC(Swift)的交互, 作為一個Developer, 本著剋服一切問題的原則, 開始學習HTML, 在這裡記錄下自己的學習筆記, 方便以後的複習, 和新手初學的參考. HTML不同於過去學過的各種面向對象語言, 函數式語言, 它不像其他語言有明確
  • 最近家裡雜事較多,自學時間實在少的可憐,所以都在空閑時間看看老外寫的內容,學習之外順便翻譯分享~等學習的時間充足些再寫寫自己的一些學習內容和知識點分析(最近有在接觸的:複習(C#,SQL)、(學習)TypeScript,(基礎操作)MongoDB。TypeScript之後入手AngularJs 2.
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...