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-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8));
background:-o-linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); /*opera*//*参数：top、bottom垂直，left、right水平*/
background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(54, 77, 127, 0.8)), to(rgba(54, 77, 127, 0.8))); /*Chrome、Safari*//*参数：linear线性， x1 x2, x3 x4 x1与x3相同时垂直，x2与x4相同时水平 from起始颜色 to结束颜色*/

时间： 2024-08-15 06:06:28

css线性渐变兼容的相关文章

CSS线性渐变

1 /*CSS线性渐变*/ 2 FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#f1f1f1); /*IE*/ 3 background:-moz-linear-gradient(top,#ffffff,#f1f1f1);/*火狐*/ 4 background:-webkit-gradient(linear, 0% 0%, 0% 100%,fr

CSS线性渐变垂直和水平渐变linear-gradient

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS线性渐变</title><

兼容IE与firefox的css 线性渐变（linear-gradient）

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

深入理解CSS线性渐变linear-gradient

× 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容前面的话在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性能.如今已经进入CSS3标准的渐变可以很轻松的完成渐变效果.渐变实际上分为线性渐变和径向渐变两种,本文介绍线性渐变. 定义渐变实际上是两种或多种颜色之间的平滑过渡.而线性渐变是多种颜色沿着一条直线(称为渐变线)过渡.渐变的实现由两部分组成:渐变线和色标.渐变线用来控制发生渐变的方向:色标包含一个颜

（转）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线性渐变位置问题

/* 线性渐变 */div.radial { width: 600px; height: 100px; margin: 30px auto; border: 1px #f00 solid; background: -webkit-gradient(linear, 0 0, 0 100%, from(yellow), color-stop(50%, red), color-stop(80%, blue));}  <div class="radial&qu

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.gradie

css3 线性渐变和径向渐变

线性渐变:ie6以下不兼容径向渐变:只支持firefox.Chrome和Safari <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html" charset="utf-8" /> <title>Background Color</title> <style ty

CSS3 线性渐变（linear-gradient）兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的