CSS颜色渐变

一. Webkit浏览器

(1) 第一种写法：

background:-webkit-gradient(linear ,10% 10%，100% 100%，

color-stop(0.14,rgb(255,0,0)),

color-stop(0.5,rgb(255,255,0)),

color-stop(1,rgb(0,0,255)) );

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四/五/N个参数：设置渐变的位置及颜色

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-webkit-gradient(linear, 0 0, 0 100%, from(＃2074af), to(＃2c91d2));

第一个参数：表示的是渐变的类型

linear线性渐变

第二个参数：分别对应x，y方向渐变的起始位置

第三个参数：分别对应x，y方向渐变的终止位置

第四个参数：设置了起始位置的颜色

第五个参数：设置了终止位置的颜色

二.Mozilla浏览器

(1)第一种写法：

background:-moz-linear-gradient(10 10 90deg,

rgb(25,0,0) 14%,

rgb(255,255,0) 50%,

rgb(0,0,255) 100%);

第一个参数：设置渐变起始位置及角度

第二/三/四/N个参数：设置渐变的颜色和位置

(2)第二种写法：这种写法比较简单，而且效果比较自然

background:-moz-linear-gradient(top, ＃FFC3C8,＃FF9298);

第一个参数：设置渐变的起始位置

第二个参数：设置起始位置的颜色

第三个参数：设置终止位置的颜色

三.IE 浏览器

IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变 1 代表横向渐变

P.S.这里设置背景的时候不需要给background设置，直接用filter即可，不要和其他的浏览器混淆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style type="text/css">

    .linear{

        width:100%;

        height:600px;

        FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#b8c4cb,endColorStr=red); /*IE 6 7 8*/

        background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */

        background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/

        background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/

        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#0000ff));      /* Safari 4-5, Chrome 1-9*/

        background: -webkit-linear-gradient(top, #fff, #0000ff);   /*Safari5.1 Chrome 10+*/

        background: -o-linear-gradient(top, #fff, #0000ff);  /*Opera 11.10+*/

    }

</style>

<body>

<div class="linear"></div>

</body>
</html>

CSS颜色渐变的更多相关文章

css颜色渐变在不同浏览器的设置
在web开发中,难免会遇到浏览器之间的兼容问题,关于Css设置颜色渐变下面有解决的办法,直接上代码: 适用于谷歌浏览器: background: -webkit-gradient(linear, 0 ...
css 颜色渐变
.top_nav { width: 100%; height: 29px; /* 如果浏览器不支持渐变,使用图像作为背景 */ background: u ...
css 颜色渐变兼容性
参考文献:http://caibaojian.com/css3-background-gradient.html https://www.cnblogs.com/xzzzys/p/7495725 ...
CSS和JS两种颜色渐变文字效果代码
js实现颜色渐变文字效果代码:  <div id="moml"> <div style="text-al ...
第四界css大会黑魔法-css网格背景、颜色拾取器、遮罩、文字颜色渐变、标题溢出渐变等
1.css网格背景 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
css文字颜色渐变的3种实现
在web前端开发过程中,UI设计师经常会设计一些带渐变文字的设计图,在以前我们只能用png的图片来代替文字,今天可以实现使用纯CSS实现渐变文字了.下面就介绍3中实现方式供大家参考! 基础样式: .g ...
【CSS进阶】CSS 颜色体系详解
说到 CSS 颜色,相比大家都不会陌生,本文是我个人对 CSS 颜色体系的一个系统总结与学习,分享给大家. 先用一张图直观的感受一下与 CSS 颜色相关大概覆盖了哪些内容. 接下来的行文内容大概会按照 ...
CSS3颜色渐变模式
1.线性渐变:linear-gradient 语法:<linear-gradient> = linear-gradient([ [ <angle> | to <si ...
CSS背景色渐变
试了下渐变色 ,主要确定开始位置结束位置,以及对应的color-stop; 以下是兼容不同浏览器的代码片段代码:<style type="text/css& ...

随机推荐

Bat脚本命令说明
命名参考使用方式如果不知道如何使用就到cmd窗口键入help 命名名例如:"help del" 命令名注释 ASSOC 显示或修改文件扩展名关联. ATTRIB 显示或更改文 ...
插入光盘，创建挂载点，挂载设备，安装rpm包，升级rpm包，卸载rpm包，查询rpm包是否安装，查询rpm包信息、安装位置，查询系统文件名属于哪个安装包
插入光盘: 创建挂载点: 创建挂载点. 挂载设备:或者mount /dev/sr0 /mnt/cdrom 安装rpm包: [root@localhost Packages]# rpm -ivh mys ...
Linux网络配置。Win10能ping虚拟机但虚拟机ping不通Win10，关闭Win10防火墙就好。
仅主机模式:配置VMnet1与虚拟机在同一个网段 ifconfig查看网卡名: ifconfig ens33 192.168.1.2: ifconfig查看是否配置成功: 在Windows物理机上pi ...
【java】多线程同步死锁
package 多线程; class A{ public synchronized void say(B b){ System.out.println("A说:你把你的本给我,我把我的笔给你 ...
解决win7中防火墙的0x6D9问题的方法
问题: 打开windows防火墙管理单元时出错:代码0x6d9" 解决方法: 下一步-->下一步-->完成.
JMeter 插件管理
JMeter管理的插件包括了jmeter-plugins.org上常用的插件以及各种第三方插件和JMeter核心插件. JMeter插件管理器主要管理插件安装,卸载,升级等操作. 安装插件管理 1.下 ...
Android基础夯实--你了解Handler有多少？
概述对于刚入门的同学来说,往往都会对Handler比较迷茫,到底Handler是个什么样的东西.当然,可能对于一些有工作经验的工程师来说,他们也不一定能很准确地描述,我们来看下API的介绍. Han ...
Python文件读写 - 文件r+ a+ open读写实际表现[示例]
先说结论: 文件r+ open: 1. write()不能实现插入写,它总是覆盖写或附加写: 2. 如果文件一打开即write(),则从开头覆盖写; 3. 如果文件一打开,用f.seek()指定文件指 ...
Linux中ls对文件进行按大小排序和按时间排序,设置ls时间格式
1 按文件大小排序使用 ll -S | grep '^[^d]' // 格式化文件大小形式 ll -Sh | grep '^[^d]' 2 按文件修改时间排序显示使用 ll -rt 3 设置ls ...

CSS颜色渐变

CSS颜色渐变的更多相关文章

随机推荐

热门专题