渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。

可分为线性渐变、径向渐变

1    线性渐变

linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

上图是从黄色渐变到绿色

1、必要的元素：

a、方向

b、起始颜色

c、终止色；

2、关于方向如下图

2    径向渐变

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

1、必要的元素：

a、辐射范围即圆半径

b、中心点 即圆的中心

c、渐变起始色

d、渐变终止色

2、关于中心点：中心位置参照的是盒子的左上角

3、关于辐射范围：其半径可以不等，即可以是椭圆

CSS3渐变知识的介绍的更多相关文章

  1. 再说CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  2. CSS3渐变——径向渐变

    上节在<再说CSS3渐变——线性渐变>和大家一起学习了CSS3 Gradient中径向渐变最新语法(称得上是W3C的标准语法)相关知识以及其基本使用.今天我们在这一篇中主要和大家一起来了解 ...

  3. CSS3渐变——线性渐变

    渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果 ...

  4. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

  5. CSS3 基本知识

    1.CSS3 简介 CSS 指层叠样式表 (Cascading Style Sheets),用于控制网页的样式和布局,CSS3 是最新的 CSS 标准. 在网页制作时采用层叠样式表,可以有效的对页面的 ...

  6. CSS3 基础知识

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  7. CSS3 基础知识[转载minsong的博客]

    CSS3 基础知识1.边框    1.1 圆角  border-radius:5px 0 0 5px;    1.2 阴影  box-shadow:2px 3px 4px 5px rgba(0,0,0 ...

  8. 14：CSS3 渐变（gradient）与 过度（transition）、CSS3 的2D动画

    14:CSS3 渐变 CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡. 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可 ...

  9. css3渐变(Gradients)

    <html> http://www.runoob.com/css3/css3-gradients.html CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的 ...

随机推荐

  1. aspnet_regiis加密文件提示路径中具有非法字符

    加密结果受当前目录影响,不知道是不是哪里操作错误,mark.   Web.config文件位置:E:\Web\Surgery 加密成功,上图命令最后有个".",表示web.conf ...

  2. 高级I/O函数

    给套接口上的I/O设置超时 1.调用alarm,在调用超过指定时间时产生SIGALARM信号,这涉及到信号处理,而且可能和进程中其他的alarm冲突 2.使用select阻塞在等待I/O上,selec ...

  3. 【转】【Oracle 集群】Linux下Oracle RAC集群搭建之基本测试与使用（九)

    原文地址:http://www.cnblogs.com/baiboy/p/orc9.html   阅读目录 目录 检查RAC状态 检查创建的数据库 全部参考文献 相关文章 Oracle 11G RAC ...

  4. 洛谷P3275 [SCOI2011]糖果_差分约束_判负环

    Code: #include<cstdio> #include<queue> #include<algorithm> using namespace std; co ...

  5. React传递参数的多种方式

    最常见的就是父子组件之间传递参数 父组件往子组件传值,直接用this.props就可以实现 在父组件中,给需要传递数据的子组件添加一个自定义属性,在子组件中通过this.props就可以获取到父组件传 ...

  6. nyoj329-循环小数

    329-循环小数 内存限制:64MB时间限制:3000msSpecial Judge: No accepted:1submit:1 题目描述: 我们可爱的 c小加 近段儿正在潜心研究数学,当他学习到循 ...

  7. Zookeeper分布式锁解决方案具体代码

    定义一个公共资源订单生成类: package com.itmayiedu.lock; import java.text.SimpleDateFormat; import java.util.Date; ...

  8. 搞定PHP面试 - 运算符知识点整理

    一.算术运算符 1. 概览 例子 名称 结果 $a + $b 加法 $a 和 $b 的和. $a - $b 减法 $a 和 $b 的差. $a * $b 乘法 $a 和 $b 的积. $a / $b ...

  9. vue 上传图片到阿里云(前端直传：不推荐)

    为何要这样做:减轻后端数据库压力(个人觉得于前端没啥用,谁返回来都行) 代码部分: <template> <div class="upLoad"> < ...

  10. TensorFlow 制作自己的TFRecord数据集

    官网的mnist和cifar10数据之后,笔者尝试着制作自己的数据集,并保存,读入,显示. TensorFlow可以支持cifar10的数据格式, 也提供了标准的TFRecord 格式,而关于 ten ...