视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS3中关于“渐变”兼容性解决方案详解
2020-11-27 18:49:59 责编:小采
文档

  这次是简单的谈一下我们常见的渐变在各个浏览器下的兼容性问题,算一个比较简单的问题。
 我们熟知的浏览器有Chrome、Firefox、Opera、Safari以及ie系列。最基础的background:#cccccc属性表示页面呈现#cccccc色,当然这个在任何浏览器下面都是满足的。但是随着我们对颜色要求的提高,引入了渐变linear-gradient,不同的浏览器对于它的认知需要加不同的前缀。通过上面的例子我们可以知道firefox:-moz-、chrome/safari/opera:-webkit-、ie:-ms-、当然ie很多版本都不接受,于是可以采取滤镜的方式处理。
重点说明一下ie的滤镜效果:

filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150)progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);
-ms-filter:alpha(opacity=100 finishopacity=50 style=1 startx=0,starty=0,finishx=0,finishy=150) progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ffffff,endcolorstr=#000000,gradientType=0);

style=0:统一形状;style=1:线性;style=2:放射状;style=3:矩形;
startx/starty/finishx/finishy:起始和终点的坐标;
gradient=1:横向渐变;gradient=0:纵向渐变。

-webkit-linear-gradient(top,#ffffff,#000000);
linear:渐变类型
top:起始点
#ffffff:起始颜色
#000000:终点颜色
支持浏览器:Webkit(-webkit-),Gecko(-moz-),presto(-o-),Trident(-ms-)
方向:
上文中'top'为起始点,同时也蕴含'to bottom'
<angle>:0deg表示方向从左到右,90deg表示方向从下向上。可用负值表示,与正值相反方向。
top类:给予起始方向便可。两个方向的只要加上两方向属性,如left top。

ps:其他的不满足这些变化的浏览器还是比较少的。对于这种情况可以采取定义一个适合的过度色用最基本的background:#red之类的表示。

下载本文
显示全文
专题