渐变是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. C++的Matlab接口

    与 原文 过程有些不同,根据具体环境自行配置即可! 转自于:http://blog.csdn.net/left_la/article/details/8206645 我的计算机环境是win7 64位系 ...

  2. H5动效的常见制作手法

    众所周知,一个元素,动往往比静更吸引眼球: 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验: 一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表 ...

  3. 优动漫PAINT新建文件

    在优动漫PAINT软件中展开任何一项操作之前,都需要新建或打开图形文件.新建文件之后,用户可根据自己的需求进行相应的设置,这样将大大节省后期制作的时间! 在优动漫PAINT中新建图形文件的方法: 方法 ...

  4. Java中类的定义

    成员变量:对应事物的属性 成员方法:对应事物的行为 类定义的格式 定义类:就是定义类的成员,包括成员变量和成员方法 成员变量:和以前定义变量几乎是一样的.只不过位置发生了改变.在类中,方法外. 成员方 ...

  5. spring cloud(一) eureka

    spring cloud 注册中心 eureka 搭建过程 1.搭建eureka-server 服务端 1.1. 新建boot工程 pom引入依赖 <dependency> <gro ...

  6. IDEA使用GsonFormat完成JSON和JavaBean之间的转换

    原文地址:https://www.leshalv.net/posts/12625/ 前言: 之前处理接口传来的一堆数据,用jsonObject很难受,后面就用gosn来弄,配合这个工具体验很好. 转: ...

  7. redis 安装成功后外部服务器链接不上

    1.reids服务器的6379端口telnet不通 2. 查看reids进程和端口,都是存在的.只是ip地址是127.0.0.1而不是0.0.0.0,只是本机能使用 3.查找redis的配置文件red ...

  8. nyoj252-01串

    01串 时间限制:1000 ms  |  内存限制:65535 KB 难度:2 描述 ACM的zyc在研究01串,他知道某一01串的长度,但他想知道不含有"11"子串的这种长度的0 ...

  9. BZOJ 3028 食物 (生成函数+数学题)

    题面:BZOJ传送门 题目让我们求这些物品在合法范围内任意组合,一共组合出$n$个物品的方案数 考虑把每种食物都用生成函数表示出来,然后用多项式乘法把它们乘起来,第$n$项的系数就是方案数 汉堡:$1 ...

  10. Python复利

    Python复利 复利的计算是对本金及其产生的利息一并计算,也就是利上有利. 复利计算的特点是:把上期末的本利和作为下一期的本金,在计算时每一期本金的数额是不同的.复利的计算公式是:   s = 0 ...