css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)

通过使用 CSS3 渐变(gradients)，你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变(gradient)是由浏览器生成的。

丛本质上来说，既然 background-image 属性中的渐变是浏览器生成的图片，可以使用其他CSS背景属性来控制它们，就像对待其他图片那样。比方说，可以使用 background-size 属性来控制渐变的尺寸， background-repeat 来控制是否将其平铺。

IE9之前的版本不支持渐变

CSS3 定义了两种类型的渐变(gradients)：

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

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

1. linearGradient-线性渐变

语法：

= linear-gradient([ [ | to ] ,]? [, ]+)

[]表示一个字符类，这里，你可以理解为一个小单元。

|表示候选。也就是“或者”的意思，要么前面的，要么就后面的。

?为量词，表示0个或1个，言外之意就是，你可以不指定方向，直- 接渐变色走起。例如：

background:linear-gradient(red, yellow);

就是从上往下的红黄条纹效果。

+也是量词，表示1个或者更多个。因此，终止颜色是不可缺少的。例如：linear-gradient(red)是酱油命，白板。

<>中的是关键字，主要是让开发人员知道这里应该放些什么内容。

1. angle

使用angles

参数释义如下，‘0deg’指向上面，同时正角度顺时针旋转，因此‘90deg’指向右边。这个角度与我们平时在ps中的角度是不一样的。在ps中，90deg的渐变是从上自下的。

渐变的角度

linear-gradient(__deg,#62C292 0%,#F8CBAD 100%)

角度坐标与位置关系

渐变的起点和终点(默认)在过中心的渐变线的垂直线上：

2. side-or-corner

可选值：

left, right, top, bottom, left top, left bottom, right top, right bottom. 分别表示，从左往右，从右往左，从上往下，从下往上，从左上往右下，从…

加前缀的浏览器可以直接写： left， right...

而标准语法要加 to ：to right, to left, to bottom, to top, to bottom left...

3.color-stop

颜色结点，语法：颜色值+空格+百分比或长度值。例如red 100px或者red 10%。

百分比或长度值: 表示距离起始点的长度。

例如：linear-gradient(to right, #62C292 0%, #F8CBAD 50%, #62C292 100%);

各参数代表的意思

效果

多个渐变颜色的实例:

使用透明度(transparent)

CSS3 渐变也支持透明度(transparent)，可用于创建减弱变淡的效果。

为了添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

background: -webkit-linear-gradient(left, rgba(104,193,147,0), rgba(104,193,147,1)); /* Safari 5.1 - 6.0 */

background: -o-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Opera 11.1 - 12.0 */

background: -moz-linear-gradient(right, rgba(104,193,147,0), rgba(104,193,147,1)); /* Firefox 3.6 - 15 */

background: linear-gradient(to right, rgba(104,193,147,0), rgba(104,193,147,1)); /* 标准的语法(必须放在最后) */```

![](http://upload-images.jianshu.io/upload_images/6084714-16b6218371ab8775.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

___

####更多栗子

css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)相关推荐

-webkit-gradient webkit内核浏览器的Linear Gradients (线性渐变) -Css3演示
webkit内核的safari. Chrome的Linear Gradients (线性渐变)的几点说明及演示: webkit内核的safari. Chrome的Linear Gradients (线 ...
css渐变小案例，比较复杂的线性渐变和径向渐变做泡泡
目录一,前言二,案例一,多个镜像渐变复合出图像 1.分析 2.第一步,四角的白色与红色条纹. 3.第二步,从上到下的渐变 4.第四步,后面的蓝红条纹效果 5.源码 6.奇思妙想三,径向渐变做出好 ...
悬停渐变特效html,CSS3 transition属性实现hover渐变动画效果
CSS3 transition属性实现hover渐变动画效果我们知道许多网页动态特效都是由FLASH或JQUERY之类的JS特效库实现的实际上现在CSS3也能实现很多类似效果了,只是在各种浏览器中兼 ...
HTML中button怎么填充GIF,css3给按钮添加背景渐变动画
css3给按钮添加背景渐变动画 button { color:#FFF; font-size:16px; outline:none; width:300px; height:48px; backgro ...
CSS3，渐变效果（线性渐变，径向渐变，重复渐变），实现各种背景效果。
CSS3中的渐变实现(线性渐变.径向渐变) CSS3中的background新增属性实现,常见页面效果. CSS3中的图片边框的基本用法 CSS3中的transition属性,实现过渡效果. CSS3 ...
CSS3质感分析——表面线性渐变
2019独角兽企业重金招聘Python工程师标准>>> W3cplus有关于CSS3的教程在国内来说算是比较多,也比较全的了,有理论介绍,也有实例分析.但有关于质感这种细节上的分析文 ...
css鼠标悬停样式_利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标
原文转载自「刘悦的技术博客」 ( 利用Css3样式属性Cursor来更换自定义个性化鼠标指针(光标) ) 现而今,我们纵向的回顾整个大前端的历史,不难发现,人们对前端的审美要求越来越高,越来越严苛,与 ...
懂点前端——对CSS中的Padding、Border、Margin属性的理解
作为一个志在AIot(实际在写上位机程序.嵌入式代码)的工程师,怎么又关心起前端来了呢?怎么说呢,前端的应用范围广啊,从高大上的算法.富有科技感的物联网应用到无处不在的Web应用,只要是需要和终端用户 ...
css中设置首行文本缩进的属性是,css如何设置首行文字缩进？
在HTML网页中通常一段文字都需要设置首行缩进两个文字,使页面更加美观,我们可以通过css实现这一效果,下面我们就来看一下使用css设置首行文字缩进的方法. css可以使用text-indent属性来 ...
html 给照片添加圆角属性,CSS3新增属性（背景图、边框背景、圆角）
1.Background-size 背景尺寸说明:background-size 规定背景图像的尺寸属性值 length (10px) 规定背景图的大小.第一个值宽度,第二个值高度.(直接定义背景 ...

css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)

css中的渐变的属性,CSS3 渐变属性（Gradients）-线性渐变(linearGradient)相关推荐

最新文章

热门文章