css 顏色漸變 相容性

来源:https://www.cnblogs.com/xingyue525/archive/2019/04/30/10795439.html
-Advertisement-
Play Games

參考文獻:http://caibaojian.com/css3-background-gradient.html https://www.cnblogs.com/xzzzys/p/7495725.html 目標: 一開始用 background: linear-gradient(to right, ...


參考文獻:http://caibaojian.com/css3-background-gradient.html

       https://www.cnblogs.com/xzzzys/p/7495725.html

 

目標:

一開始用 background: linear-gradient(to right, #000,#fff)  :

谷歌、360極速模式、火狐、歐朋(都是新版)可以相容

ie9  不可以相容

所以為了ie或其他較低版本瀏覽器相容:

.gradient{

  width: 973px;
  height: 100%;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(100%,#ffffff)); /* 相容Safari4-5, chrome1-9 */
  background: -moz-linear-gradient(right, #000000 0%, #ffffff 100%); /* firefox */
  background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%); /* chrome */
  background: -o-linear-gradient(right, #000000 0%,#ffffff 100%); /* opera */
  background: -ms-linear-gradient(right, #000000 0%,#ffffff 100%); /* ie */
  background: linear-gradient(to right, #000000,#ffffff); /* firefox */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff',GradientType=1)"; /* 相容IE8~IE9 */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); /* 相容IE5~IE9 */
}

註意:

1、filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 ); 中 GradientType=1 代表水平 , GradientType=0 代表從上往下(預設從上往下)

  還要特別值得註意的是 startColorstr='#000000' 中的 16進位顏色 不能簡寫 為 #000 ,不然也不會識別達到效果

2、background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%);  中  left開始位置,其他都都是結束位置

這樣就可以相容了。

 


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

-Advertisement-
Play Games
更多相關文章
  • 映射(Map) 映射(Map)是十分常見的一種數據結構,由一系列鍵(key)和值(value)組成的。每個key對應一個value,根據key可以獲取和設定value,也可以根據key來查詢value。 上面那個圖展示了一個映射,該映射以每個值得id作為鍵,每個鍵對應一個值。 上面那個圖展示了一個映 ...
  • 按鈕樣式: 需要載入jq <script> (function(a){a.fn.scrollToTop=function(c){var d={speed:800};c&&a.extend(d,{speed:c});return this.each(function(){var b=a(this);a ...
  • js練習計算器,支持滑鼠點擊、鍵盤操作 ...
  • 學習筆記 1.JQuery添加節點相關方法 2.JQuery刪除節點 3.JQuery替換節點 4.JQuery節點的複製 ...
  • 效果圖: 1.html代碼 1 <div class="form-group" style="display: flex;"> 2 <div> 3 <span>驗證碼:</span> 4 <input type="text" id="code" v-model="code" class="code" ...
  • Form <el-form labelPosition="right" labelWidth="10%" size="small" :model="list" ref="ruleForm" :rules="rules"> <el-form-item label="商家類型"> <el-select ...
  • 最近做了一個小程式,主要是二手閑置免費信息發佈系統的功能,裡面包括了登錄,發佈商品,商品管理,違規投訴,canva商品海報生成,分享等一些基礎的功能,可以說代碼都是自己辛辛苦苦寫出來的。可作為畢業設計、期末作業,下麵就看下截圖吧 ​​​​​​​​​​​ 已上就是我花了幾個星期天天熬夜寫出來的一個小程 ...
  • 核心思想 隨機產生規定範圍內的整數,然後再產生相同範圍內的整數,兩者相同時,則暫停。 所用知識 Math.random() * num: 產生從0到num的隨機數 Math.floor(): 向下取整 簡單的DOM操作等 技術擴展 擴展人數 添加停止鍵等 效果 代碼如下 html: css: jav ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...