CSS 颜色渐变兼容

/* 颜色渐变兼容 */
#gradient {
  background: -moz-linear-gradient(top,#fff 0,#fef5e1 100%);
  background: -o-linear-gradient(top,#fff 0,#fef5e1 100%);
  background: linear-gradient(to bottom, #fff 0, #fef5e1 100%);
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#fef5e1,GradientType=0);
}

时间: 2024-12-13 10:35:41

CSS 颜色渐变兼容的相关文章

css颜色渐变在不同浏览器的设置

在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 0, 0 100%, from(#4285fa), to(#366dcb)); from:是指渐变起始颜色 to:是指渐变结束的颜色 适用于火狐浏览器中 background: -moz-linear-gradient( top,#4285fa,#366dcb); top:是值渐变方向从上向下 第一

css线性渐变兼容

css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); background: -moz-linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); /*Firefox*//*参数:top.bottom垂直,left.right水平*/ background: -ms-linear-grad

(转)css 背景色渐变兼容写法

css3:linear-gradient 比如:黑色渐变到白色,代码如下: .gradient{ background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#ffffff)); background: -webkit-linea

css 颜色渐变

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

IE6/7兼容伪类、IE9以下兼容颜色渐变、IE8以下兼容nth:child(n)

1.IE6/7兼容伪类 _1.CSS部分:一个有冒号,一个是空格分隔.前者IE8+及其他现代浏览器:后者为IE6-7准备的 #test:before, #test before{ content: attr(data-content); width: 0; height: 0; } _2.HTML部分 <div id="test"  data-content=""></div> 设置content _3.JS部分 设置IE6/7 var $b

CSS 实现背景色渐变和文字颜色渐变

1. 背景色渐变 A . linear-gradient:用线性渐变创建图像. 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 下述值用来表示渐变的方向,可以使用角度或者关键字来设置: <angle>:用角度值指定渐变的方向(或角度). to left: 设置渐变为

颜色渐变CSS

颜色渐变CSS IE系列 filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FF0000',endColorStr='#F9F900',gradientType='0'); 参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平 Firefox background: -moz-linear-gradient(top, #FF0000, #

前端基础学习-css文字颜色渐变的3种实现

在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .gradient-text{text-align: left;text-indent:30px;line-height: 50px;font-size:40px;font-weight:bolder; position: relative; } 第一种方法,使用 background-cli. tex

CSS背景色渐变

试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段 代码:<style type="text/css"> .jb_keleyi_com{ height: 300px; width:100px; margin:0px auto; background-image: -moz-linear-gradient(top, #00FF00, #FF0000); /*火狐*/background: -o-linear-g