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

随机推荐

Ubuntu系统怎么切换多用户命令界面
ctrl+alt+F2~F6 切换窗口返回桌面 Ctrl+Alt+F7
cell的复用机制
以下全部都是转载自别人的博客:http://blog.sina.com.cn/s/blog_9c3c519b01016aqu.html 转自:http://www.2cto.com/kf/201207 ...
浅析c++和c语言的enum类型
1.先看c语言枚举类型 1.c语言定义枚举类型,每一个枚举元素都是一个整数2.注重数据类型,没有数据类型限定3.相邻枚举元素相差整数4.可以通过整数访问,不够安全 2.上代码: 1 #include& ...
Xamarin android spinner的使用方法
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...
xamarin android打开拍照
xamarin android打开摄像头 Intent intentBrowser = new Intent("android.media.action.IMAGE_CAPTURE" ...
我搞zabbix的那两天（2）
摘要:前一篇(我搞zabbix的那两天(1))我介绍了Zabbix的安装部署以及遇到的问题,这一篇将介绍zabbix 使用及短信等告警实现!!! Zabbix主界面及汉化方法介绍 1.1 初始化主界面 ...
K:java 断言 assert 初步使用：断言开启、断言使用
@转自天地悠悠的个人博客主要总结一下在eclipse中如何使用断言. (一)首先明确: java断言Assert是jdk1.4引入的. jvm 断言默认是关闭的. 断言是可以局部开启的,如:父类禁止 ...
K：java中正则表达式的使用说明及其举例
从Java1.4起,java核心API就引入了java.util.regex程序包来处理正则表达式,并使用该包下的相关类进行字符串的匹配.搜索.提取.分析结构化内容等工作.需要注意的是,正则表达式本身 ...
Django__RBAC
RBAC : 基于角色的权限访问控制(Role-Based Access Control) RBAC 模型作为目前最为广泛接受的权限模型角色访问控制(RBAC)引入了Role的概念,目的是为了隔离U ...
Hive Getting Started补充
配置管理概述 Hive从<install-dir>/conf/hive-default.xml中读取它的默认配置 Hive配置目录的位置可以通过设置HIVE_CONF_DIR环境变量的值来 ...

CSS颜色渐变

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

随机推荐

热门专题