css3背景漸變色代碼

来源:http://www.cnblogs.com/dej-11/archive/2017/11/15/7837332.html
-Advertisement-
Play Games

從上到下 #grad { background: -webkit-linear-gradient(red, blue); background: -o-linear-gradient(red, blue); background: -moz-linear-gradient(red, blue); b ...


從上到下 #grad {
  background: -webkit-linear-gradient(red, blue);
  background: -o-linear-gradient(red, blue);
  background: -moz-linear-gradient(red, blue);
  background: linear-gradient(red, blue);
} 從左到右 #grad {
  background: -webkit-linear-gradient(left, red , blue);
  background: -o-linear-gradient(right, red, blue);
  background: -moz-linear-gradient(right, red, blue);
  background: linear-gradient(to right, red , blue);
} 從左上到右下 #grad {
  background: -webkit-linear-gradient(left top, red , blue);
  background: -o-linear-gradient(bottom right, red, blue);
  background: -moz-linear-gradient(bottom right, red, blue);
  background: linear-gradient(to bottom right, red , blue);
} 使用角度 #grad {
  background: -webkit-linear-gradient(180deg, red, blue);
  background: -o-linear-gradient(180deg, red, blue);
  background: -moz-linear-gradient(180deg, red, blue);
  background: linear-gradient(180deg, red, blue);
} 多種顏色節點 #grad {
 
  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
 
  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); 
} 使用透明度 #grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
} 徑向漸變 #grad {
  background: -webkit-radial-gradient(red, green, blue);
  background: -o-radial-gradient(red, green, blue);
  background: -moz-radial-gradient(red, green, blue);
  background: radial-gradient(red, green, blue);
} 形狀為圓形的徑向漸變

#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green);
  background: -o-radial-gradient(circle, red, yellow, green);
  background: -moz-radial-gradient(circle, red, yellow, green);
  background: radial-gradient(circle, red, yellow, green);
}

顏色不均勻的徑向漸變

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%);
  background: -o-radial-gradient(red 5%, green 15%, blue 60%);
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%);
  background: radial-gradient(red 5%, green 15%, blue 60%);
}

  轉自:

愛一季劉心雨的博客

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

-Advertisement-
Play Games
更多相關文章
  • 開發環境:VS2017 資料庫:SQL 2012 本文是學習EF的第一篇筆記,參考lloydsheng的帖子實踐,總結記錄。 一、創建項目 先創建一個空白的解決方案,後續關於EF入門筆記基於此項目完成 。 二、安裝 使用NuGet下載安裝EntityFramework到項目中,如果不會使用NuGet... ...
  • 總結一下.NET的編譯過程, 一般的高級編程語言會把代碼編譯成機器碼,也就是我們說的非托管代碼,執行在編譯它的電腦上。 而.NET編譯代碼的時候會把高級編程語言編譯成中間語言 運行在CLR(公共語言運行庫)上,也就是把代碼集成一個exe文件中, .NET 在編譯過程中 沒有直接編譯成CPU認識的代碼 ...
  • 首先要設置主窗體KeyPreview為true,可直接在屬性中進行設置,或者在窗體載入中設置: this.KeyPreview = true;然後添加窗體KeyDown事件,如下: ...
  • <!DOCTYPE html><html> <head> <meta charset="utf-8"> </head></html><?php/** * Created by 陳藝赫. * User: Vvvvv * Date: 2017/10/9 * Time: 9:01 *///面向對象//什麼 ...
  • ngrok的使用 1、下載Tomcat並啟動。 2、訪問本地Tomcat,代表啟動Tomcat成功。 3、到https://ngrok.com下載ngrok. 4、下載存放的目錄。 5、命令行進入到該目錄,執行 ngrok http 8080 。 8080是Tomcat預設的埠號。 6、之後就可映 ...
  • 1.1 Python語言介紹 1.1.1 什麼是編程?為什麼要編程 編程 是個動詞,編程==寫代碼,寫代碼為了什麼? 為了讓電腦乾你想要乾的事情,比如,馬化騰想跟別人聊天,於是寫了個聊天軟體,這個軟體就是一堆代碼的集合,這些代碼是什麼?這些代碼是電腦能理解的語言。 例子:你是公司老闆,你有一個員 ...
  • 1.本章內容目錄: 概述 運行時數據區域 程式計數器 java虛擬機棧 本地方法棧 java堆 方法區 運行時常量池 直接記憶體 HotSpot虛擬機對象探秘 對象的創建 對象的記憶體佈局 對象的訪問定位 程式計數器 java虛擬機棧 本地方法棧 java堆 方法區 運行時常量池 直接記憶體 對象的創建 ...
  • 1. 什麼是Spring Spring是一個輕量級的容器,他實現了IOC和非侵入的框架,並提供了AOP的實現方式,提供了持久層事務的支持,其讓java開發模塊化,並且貫穿持久層,邏輯層,表現層,讓每一個模塊都可以獨立分開,降低耦合,提高代碼復用率. 2. Spring的好處 Spring提供了IOC ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...