Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+_html/css_WEB-ITnose

css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+_html/css_WEB-ITnose

WBOY
Freigeben： 2016-06-24 11:24:48
Original
2235 Leute haben es durchsucht

css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+, Firefox4.0+, Chrome4.0+, Safari4.0+, Opera15.0+

语法：

：linear-gradient([ ,]? [, ]+);

：[ left | right ]? [ top | bottom ]? || ?

： [  |  ]?

取值：

left： 设置左边为渐变起点的横坐标值。 right： 设置右边为渐变起点的横坐标值。 top： 设置顶部为渐变起点的纵坐标值。 bottom： 设置底部为渐变起点的纵坐标值。 ： 用角度值指定渐变的方向（或角度）。 ： 指定渐变的起止颜色。

： 指定颜色。请参阅颜色值 ： 用长度值指定起止色位置。不允许负值 ： 用百分比指定起止色位置。

说明：

用线性渐变创建图像。

  • Firefox还支持使用、和center特殊值定义渐变起点，并支持起点与角度一起使用。

  • 示例代码：


    （图一）

    linear-gradient(#fff,#333);linear-gradient(top,#fff,#333);linear-gradient(bottom,#333,#fff);linear-gradient(-90deg,#fff,#333);
    Nach dem Login kopieren

    以上几句代码都可以实现如（图一）的渐变效果

    • 兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
    • IE Firefox Safari Chrome Opera
    6-9 #1 4.0-15.0 -moz- 4.0-6.0 -webkit- 4.0-25.0 -webkit- #2 15.0
    10.0 16.0 6.1 26.0
    1. IE5.5-9.0使用私有滤镜来实现该效果: progid:DXImageTransform.Microsoft.Gradient()
    2. chrome4.0-9.0使用更老的语法：-webkit-gradient(linear,…)
    Verwandte Etiketten：
    css3背景颜色渐变属性 兼容性测试基础环境为：windows系统；IE6.0+ Firefox4.0+ Chrom
    Quelle：php.cn
    Vorheriger Artikel：烦人的IE7、8,半透明滤镜(filter:alpha)失效、png半透明失效的解决办法_html/css_WEB-ITnose Nächster Artikel：如何优雅地使用 Sublime Text 3_html/css_WEB-ITnose
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Neueste Artikel des Autors
    Aktuelle Ausgaben
    function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...
    Aus 2024-04-29 11:01:01
    0
    3
    2061
    So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?
    Aus 2024-04-23 00:22:19
    0
    11
    2222
    Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
    Aus 2024-04-19 15:37:47
    0
    1
    1872
    Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...
    Aus 2024-04-18 23:52:34
    0
    1
    1753
    Wo gibt es die Kursunterlagen zum CSS-Mindmapping? Kursunterlagen
    Aus 2024-04-16 10:10:18
    0
    0
    1779
    verwandte Themen
    Mehr>
    Beliebte Empfehlungen
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage