linear-gradient

学习要点： 1.线性渐变 2.径向渐变 主讲教师：李炎恢 本章主要探讨 HTML5 中 CSS3 背景渐变功能，主要有两种渐变方式：线性渐变和径向（放射性）渐变。 一．线性渐变 CSS3 提供了 linear-gradient 属性实现背景颜色的渐变功能。在以前，这种效果必须采用图片才能实现的。首先，我们先看一下它的样式表，如下： linear-gradient(方位, 起始色, 末尾色) 方位 可选参数，渐变的方位。可以使用的值有：to top、to top right、to right、to bottom、to bottom left、to left、to top left。 起始色 必选参数，颜色值 末尾色 必选参数，颜色值 //两个必须参数 background-image: linear-gradient(orange,green); //增加一个方位 background-image: linear-gradient(to top,orange,green); 通过 top、left、right、bottom 这四组实现的渐变方向有时比较单一，我们可以使用以角度单位的数值来设置方位。比如 0 度（0deg）相当于 to top；角度会沿逆时针方向随着你的角度的增加而增加。 //通过角度设置方位，0 ~ 360 度之间，可以是负值 background-image:

《CSS揭秘》这本书非常不错，充满了干货和惊喜。以下主要是关于使用渐变做出来的一些效果的笔记。请用最新的现代浏览器观看。 首先要回顾下一个css语句： linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+) 这是一个线性渐变，第一参数是渐变方向，是可选的。可以是角度，angle的值是度数，比如45deg，90deg。也可以使用to side-or-corner .比如 to left（从右到左） ,to bottom(从上到下)；第二个和第三个参数都是渐变颜色。所以最简单的写法可以有： background: linear-gradient(aquamarine,orange) 默认是从上往下渐变。但如果我们不想要渐变，就要颜色条。诀窍就是两种颜色之间不要留空隙，因为留了空隙就会出现渐变的过渡效果。所以我们可以设置各占50%。这个50%代表颜色位置。也可以是长度单位。 background: linear-gradient(aquamarine 50%,orange 50%) 如果我们需要多种颜色呢，比如一个蓝白红。 background: linear-gradient(90deg,aqua 0 ,aqua 33%,white 0 ,white 67%

CSS3渐变(Gradients) 可以让你在两个或多个指定颜色之间显示平稳的过度，包括透明度。 以前，你必须使用图像来实现这些效果。但是，通过Css3渐变(Gradients)，你可以减少下载的事件和宽带的使用。此外，渐变效果元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。 CSS3定义了两种类型的渐变(gradients): 1. 线性渐变(Linear Gradients) -向下、向上、向左、向右、对角方向：（to bottom、to top、to right、to left、to bottom right，等等） 2. 径向渐变(Radial Gradients) -由他们的中心定义 浏览器支持： 表中的数字指定了完全支持该属性的第一个浏览器版本。 后边跟 -webkit-、-moz- 或 -o- 的数字指定了需加上前缀才能支持属性的第一个版本。 属性 IE Google FF Safari Opera linear-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.1 -o- radial-gradient 10.0 26.0 10.0 -webkit- 16.0 3.6 -moz- 6.1 5.1 -webkit- 12.1 11.6 -o-

解决方法一、 linear-gradient() background - color : red ; /* 浏览器不支持的时候显示 */ background - image : linear - gradient ( to right , red , orange , yellow , green , blue , indigo , violet ) ; /* 标准的语法（必须放在最后） */ 参数： 1 、direction : 方向 / 角度 eg : to right / to bottom right / to bottom / 90 deg 2 、colorp01 , color02 ... ... ... . 用于指定渐变的起止颜色 eg: background - image : linear - gradient ( to right bottom , red , orange , yellow , green ) ; /* 标准的语法（必须放在最后） */ background - image : linear - gradient ( 60 deg , red , orange , yellow , green ) ; /* 标准的语法（必须放在最后） */ 缺点：占用background-image属性 -webkit-gradient

CSS3的背景缩写 background: color position size repeat origin clip attachment image;//按照该顺序，不能省略 background-clip background-clip: border-box | padding-box | content-box;　　//指定背景绘制区域//border-box：背景被裁剪到 边框盒//padding-box：背景被裁剪到 内边距框//content-box：背景被裁剪到 内容框 background-origin background-origin: border-box | padding-box | content-box;　　//指定background-position属性应该是 相对位置//border-box：从边框开始//padding-box：从内边距开始//content-box：从内容区开始 　搭配：background-position:50px,70px;　　//水平方向偏移50px，垂直方向偏移70px background-size background-size: length | percentage | cover | contain;　　//指定背景图片大小background-size: 90px 80px;　　/

CSS3渐变可以在两个或多个指定的颜色之间显示平稳的过渡。 以前，必须使用图像来实现这些效果。 但是，通过使用CSS3渐变，可以减少下载的时间和宽带的使用；此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。 线性渐变： 语法： background-image: linear-gradient(direction, color-stop1, color-stop2, ...); ，默认从上到下。 //从左到右 #grad { height: 200px; background-image: linear-gradient(to right, red , yellow , green); } //从左上角开始到右下角 #grad { height: 200px; background-image: linear-gradient(to bottom right, red, yellow, green); } 可以定义一个角度，而不用预定义方向。 background-image: linear-gradient(angle, color-stop1, color-stop2,...); 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg将创建一个从下到上的渐变，90deg将创建一个从左到右的渐变。 #grad { background-image

背景色，除了纯色以外，还能够使用多种颜色组合成为渐变背景色，使页面丰富。 渐变背景分为两种： 1、线性渐变； 2、环形渐变； 线性渐变 线性渐变分为：横向、纵向、对角渐变三种渐变 语法 ： <linear-gradient> = linear-gradient([ [ <angle>| to <aside-or-corner> ] ,]? <color-stop>[, <color-stop>]+) <side-or-corner> = [left | right] || [top | bottom] <color-stop> = <color> [ <length> | <percentage> ]? <angle>：用角度值指定渐变的方向。 to left：设置渐变为从右到左； to right：设置渐变为从左到右； to top：设置渐变为从下到上； to bottom：设置渐变为从上到下； <color-stop> ：设置指定渐变的起止颜色 <color>：指定颜色 <length>：用长度值指定起止色位置。不允许负值 <percentage>：用百分比指定起止色位置。 background:linear-gradient(参数1，参数2，参数3，参数4....参数N) 参数1：可填可不填，填写的话写方向 如：to right,就是渐变方向由左到右，不填写默认从上到下渐变。

/*--> */ /*--> */ 14：CSS3 渐变 CSS3 渐变（gradient）可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前，你必须使用图像来实现这些效果，现在通过使用 CSS3 的渐变（gradients）即可实现。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。 1、线性渐变 语法： background: linear-gradient(direction, color-stop1, color-stop2, ...); 说明： direction：默认为to bottom，即从上向下的渐变； stop：颜色的分布位置，默认均匀分布，例如有3个颜色，各个颜色的stop均为33.33%。 示例1：to left、top right、to bottom、to top div { background:linear-gradient(to left, red , blue) } div { background:linear-gradient(to right, red , blue) } div { background:linear-gradient(to bottom, red , blue) } /* 浏览器默认值 */ div { background:linear-gradient(to top, red

CSS3 渐变 渐变（gradients）可以在两个或多个指定的颜色之间显示平稳的过渡。 兼容性：IE10+，Chrome26+，FireFox16+，Safari6.1+，Opera12.1+ CSS3线性渐变 线性渐变属性（Linear Gradients）是沿着一根轴线改变颜色，从起点到终点颜色进行顺序渐变（从一边拉向另一边） 语法： background: linear-gradient(direction,color-stop1,color-stop2,…….); 其共有三个参数，第一个参数表示线性渐变的方向，top 是从上到下、left 是从左到右，如果定义成 left top，那就是从左上角到右下角。第二个和第三个参数分别是起点颜色和终点颜色。你还可以在它们之间插入更多的参数，表示多种颜色的渐变。 还可以使用角度：background: linear-gradient(angle,color-stop1,color-stop2,…….); 角度说明 角度是指水平线和渐变线之间的角度，逆时针方向计算。 线性渐变颜色节点 background:linear-gradient(color1 length|percent,color2 length|percent……) .divOne { background: linear-gradient( red, green,

今天做东西突然用到了渐变背景色，一时间突然想不起来了，就去菜鸟教程上看了看，重新学习了一下。 CSS3 渐变可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变是由浏览器生成的。 CSS3 定义了两种类型的渐变（gradients）： 线性渐变也就是 向下/向上/向左/向右/对角方向 径向渐变也就是由它们的中心定义 我们先来学习一下线性渐变的语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);可以是多种颜色，最少是两种，要不你怎么实现渐变； 线性渐变它默认的是从上到下的变化，写一个例子： #grad { background: - webkit-linear-gradient ( red , blue ) ; /* Safari 5.1 - 6.0 */ background: - o-linear-gradient ( red , blue ) ; /* Opera 11.1 - 12.0 */ background: - moz-linear-gradient ( red , blue ) ; /* Firefox 3.6 - 15 *