渐变分为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. 编译原理Tiny语言的定义

    Here is the definition for Tiny language The Tiny lexicon is as follows: Keywords:   IF ELSE WRITE R ...

  2. C++第13周(春)项目1 - 点、圆的关系

    课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759.内有完整教学方案及资源链接 [项目1 - 点.圆的关系](1)先建立一个P ...

  3. jquery分页

    //分页插件 /** 2015-12-7 **/ (function($){ var ms = { init:function(obj,args){ return (function(){ ms.fi ...

  4. EasyUI - tab动态加载datagrid

    addTab: function() { $("#myTabs").tabs('add', { title: 'my title', closable: true, tools: ...

  5. 解决 RichTextBox 文件格式不对问题

    RichTextBox文件格式不对: 原因:富文本框的LoadFile方法只支持RTF格式的文件或者标准的ASCII文本本档,,我们一般的文本文档是ANSI或者UTF-8的格式,所以,报这个错. 解决 ...

  6. 数据类型及其空间大小,vs2012实测

    #include "stdafx.h" #include <stdio.h> #include "common.h" #include " ...

  7. BZOJ 3631: [JLOI2014]松鼠的新家( 树链剖分 )

    裸树链剖分... ------------------------------------------------------------------- #include<bits/stdc++ ...

  8. java--多线程之Runnable

    引读: 上一篇博文中讲了Thread的继承,存在一个问题就是,如果类本身已经继承了某个父类,又要继承Thread,导致多重继承. [但是我们知道接口是实现多重继承的重要方式].java提供了Runna ...

  9. 墙内安装nautilus-dropbox 1.6.0-2

    软件包:nautilus-dropbox 版本号:1.6.0-2 # aptitude install nautilus-dropbox # less `which dropbox` 查找到下载链接: ...

  10. 基于visual Studio2013解决C语言竞赛题之0904文件排序

       题目