zoukankan      html  css  js  c++  java
  • 兼容当前多浏览器的渐变颜色背景gradient的写法

    经常有一些时候需要使用渐变背景,使用长条图片有点太不高大上了,于是自己写了个小例子,兼容多浏览器就要为每一个浏览器写对应的CSS,太低版本的浏览器只能使用图片做背景。

    下面是当前五大浏览器对gradient的支持:

    1 <div id="gradient"></div>
     1 <style type="text/css" media="screen"> 
     2 #gradient { 
     3 width: 200px; 
     4 height: 200px; 
     5 /* 如果浏览器不支持渐变,使用图像作为背景 */ 
     6 background: url(gradient.jpg); 
     7 /* Webkit: Safari 4-5, Chrome 1-9 */ 
     8 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6600), to(#339900)); 
     9 /* Webkit: Safari 5.1+, Chrome 10+ */ 
    10 background: -webkit-linear-gradient(top, #ff6600, #339900); 
    11 /* Firefox 3.6+ */ 
    12 background: -moz-linear-gradient(top, #ff6600, #339900); 
    13 /* Opera 11.10+ */ 
    14 background: -o-linear-gradient(top, #ff6600, #339900); 
    15 /* IE 10 */ 
    16 background: -ms-linear-gradient(top, #ff6600, #339900); 
    17 /* IE < 10 */ 
    18 /* 注意:这一行必须写在最后 */ 
    19 FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ff6600, endColorStr=#339900);} 
    20 </style>

    啥时没有IE6,啥时世界算太平啊。万恶的IE。

  • 相关阅读:
    time 模块学习
    day 14 自定义模块,常用模块 time .datetime ,time 模块
    day 13 课后作业
    day 12 课后作业
    day 11课后作业
    树状数组最值
    hdu 1059 Dividing bitset 多重背包
    XVII Open Cup named after E.V. Pankratiev. XXI Ural Championship
    最长公共子序列板/滚动 N^2
    Uva 10635
  • 原文地址:https://www.cnblogs.com/Scl891004X/p/6144962.html
Copyright © 2011-2022 走看看