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%,from(#ffffff), to(#f1f1f1));/*谷歌*/
5             background-image: -webkit-gradient(linear,left bottom,left top,color-start(0, #ffffff),color-stop(1, #f1f1f1));/* Safari & Chrome*/
6             filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#ffffff‘, endColorstr=‘#f1f1f1‘); /*IE6 & IE7*/
7             -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=‘#ffffff‘, endColorstr=‘#f1f1f1‘)"; /* IE8 */ 

有时间在写解释！

时间： 2024-11-01 09:25:27

CSS线性渐变的相关文章

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

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

/* 线性渐变 */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线性渐变linear-gradient

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

兼容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使用线性渐变实现滚动进度条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

css之为文本添加线性渐变和外描边

css之为文本添加线性渐变和外描边一.效果: 描边:描边+渐变: 二.描边: api:text-stroke 问题:text-stroke的描边是居中描边,无法直接设置外描边解决:在before中添加文本,设置字体描边,绝对定位在文本下方代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title<

CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（3）线性渐变

线性渐变可以设置3个参数值:方向.起始颜色.结束颜色.最简单的模式只需要定义起始颜色和结束颜色,起点.终点和方向默认自元素的顶部到底部.下面举例说明: .test{ background:linear-gradient(red, blue); } 上述代码的效果如图5.9所示. 图5.9 最简单的线性渐变效果如果要在一些旧版本的浏览器(除IE)下可以正常显示如图5.9的效果,则需要添加兼容代码: .test { background:-webkit-linear-gradient(red,

线性渐变css

从上到下的线性渐变: #grad { background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradie