渐变分为4类

1:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向

2:径向渐变(Radial Gradients)- 由它们的中心定义

3:对角渐变

4:角度渐变

以下是我写的代码

div{float: left;width: 100px;height:100px;}

.odiv1{

background:-moz-linear-gradient(red,blue);

background:-webkit-linear-gradient(red,blue);

background:-ms-linear-gradient(red,blue);

background:-o-linear-gradient(red,blue);

background:linear-gradient(red,blue);/*线性渐变默认情况下是从上到下*/

}

.odiv2{

background:-moz-radial-gradient(red,blue);

background:-webkit-radial-gradient(red,blue);

background:-ms-radial-gradient(red,blue);

background:-o-radial-gradient(red,blue);

background: radial-gradient(red,blue);/*径向渐变*/

}

.odiv3{/* 标准的语法(必须放在最后) */

background:-webkit-linear-gradient(right,red,blue);

background:-moz-linear-gradient(right,red,blue) ;

background:-ms-linear-gradient(right,red,blue);

background:-o-linear-gradient(right,red,blue);

background: linear-gradient(to right,red,blue);/*从右向左渐变*/

}

.odiv4{/*对角渐变左上角開始(到右下角)的线性渐变*/

background: -webkit-linear-gradient(left top,red,blue);

background:-moz-linear-gradient(bottom right,red,blue);

background: -ms-linear-gradient(bottom right,red,blue);

background: -o-linear-gradient(bottom right,red,blue);

background:linear-gradient(to bottom right,red,blue);

}

.odiv5{/*以60度进行的渐变*/

background:-webkit-linear-gradient(60deg,red,blue);

background:-moz-linear-gradient(60deg,red,blue) ;

background:-ms-linear-gradient(60deg,red,blue);

background:-o-linear-gradient(60deg,red,blue);

background:linear-gradient(60deg,red,blue);

}

<div class="odiv1"></div>

<div class="odiv2"></div>

<div class="odiv3"></div>

<div class="odiv4"></div>

<div class="odiv5"></div>

高手勿喷啊!

css Gradients(渐变)的更多相关文章

  1. CSS线性渐变

    /*CSS线性渐变*/ FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff, ...

  2. css线性渐变兼容

    css线性渐变兼容 background: linear-gradient(top, rgba(54, 77, 127, 0.8), rgba(54, 77, 127, 0.8)); backgrou ...

  3. css中渐变的分割线和自定义滚动条样式

    css中渐变的分隔线: <div style="background:linear-gradient(to left,#efefef,#b6b6b6,#efefef);height:1 ...

  4. CSS gradient渐变之webkit核心浏览器下的使用

    一.关于渐变 渐变是一种应用于平面的视觉效果,可以从一种颜色逐渐地转变成另外一种颜色,故可以创建类似于彩虹的效果渐变可以应用在任何可以使用图片的地方.例如,您可以指定一个这么一个渐变:顶部的颜色是红色 ...

  5. css线性渐变--linear-gradient

    使用css直接写渐变,对于现在而言,应该属于比价简单的一件事了,在一定程度上,扁平化的设计趋势的出现,减少了使用渐变色的场景,但是并不影响我们逐渐的熟悉线性渐变Linear-gradient的写法. ...

  6. CSS背景色渐变

      试了下 渐变色  ,主要确定开始位置  结束位置,以及对应的color-stop;  以下是兼容不同浏览器的代码片段       代码:<style type="text/css& ...

  7. 深入理解CSS径向渐变radial-gradient

    × 目录 [1]定义 [2]椭圆圆心 [3]椭圆类型 [4]椭圆大小 [5]色标 [6]重复渐变 [7]其他 前面的话 上篇介绍了线性渐变,本文接着介绍径向渐变的内容 定义 径向渐变,实际上就是椭圆渐 ...

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

    × 目录 [1]定义 [2]渐变线 [3]色标 [4]重复渐变 [5]多背景 [6]应用场景 [7]IE兼容 前面的话 在CSS3出现之前,渐变效果只能通过图形软件设计图片来实现,可拓展性差,还影响性 ...

  9. 纯css径向渐变(CSS3--Gradient)

    渐变 一.CSS3的径向渐变 效果图网址:http://www.spritecow.com 图像拼接技术 CSS3 Gradient分为linear-gradient(线性渐变)和radial-gra ...

随机推荐

  1. 【转】OpenCV中使用神经网络 CvANN_MLP

    原文见:http://blog.csdn.net/xiaowei_cqu/article/details/9027617 OpenCV的ml模块实现了人工神经网络(Artificial Neural ...

  2. Hibernate执行sql语句

    Hibernate执行sql语句:BasicServiceImpl basicServiceImpl = new BasicServiceImpl();String hql = "selec ...

  3. 2、Zookeeper集群搭建、命令行Client操作

    zookeeper 集群最好是奇数台: 5台允许挂掉2台 4台只能允许挂掉1台 zjtest7-redis:/opt/zookeeper/bin# ./zkServer.sh status ZooKe ...

  4. 进入MFC讲坛的前言(一)

    在这里,我想谈谈自己学习MFC的一些体会.我是从1997年才开始在Window下编写程序的.在这之前,我编写过一些DOS程序,包括一个简单的全屏幕编辑器和一个带函数的表达式解释器,都是一些小的程序.W ...

  5. QTP的基本功能介绍

    • QTP的基本功能介绍 HP QuickTest Professional 支持功能測试和回归測试自己主动化,用于每一个主要软件应用程序和环境.此解决方式使用keyword驱动的測试概念,简化了測试 ...

  6. 开源框架ViewPagerIndicator的使用——TabPageIndicator

    1.导入Android-ViewPagerIndicator库文件 下载地址:https://github.com/JakeWharton/ViewPagerIndicator 2.布局文件     ...

  7. #define DEBUG用法

    背景: 很多时候我们写代码,想要看看函数或者算法执行的对不对.是否达到了我们想要的效果, 那么,最直接的办法是把函数或者算法所操作数据显示出来看看,这样就需要写一些cout<<直接输出的代 ...

  8. C语言数据结构-创建链表的四种方法

    结点类型: typedef int datatype; typedef struct NODE{ datatype data; struct NODE *next; }Node,*LinkList; ...

  9. 利用java concurrent 包实现日志写数据库的并发处理

    一.概述 在很多系统中,往往需要将各种操作写入数据库(比如客户端发起的操作). 最简单的做法是,封装一个公共的写日志的api,各个操作中调用该api完成自己操作日志的入库.但因为入数据库效率比较低,如 ...

  10. 在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编

    在 Perl看来, 字符串只有两种形式. 一种是octets, 即8位序列, 也就是我们通常说的字节数组. 另一种utf8编码的字符串, perl管它叫string. 也就是说: Perl只熟悉两种编 ...