css3的gradient分为两种：线性渐变（linear）和径向渐变（radial）。

一、线性渐变linear-gradient

1、介绍

linear-gradient([设置方向]，[设置开始颜色]，[设置多种过度颜色]，[设置结束颜色])

参数：

第一个参数：指定渐变方向，可以用“角度”的关键字或“英文”来表示：

第一个参数默认：180deg，等同于“to bottom”。

后面的颜色至少有2个，即开始颜色和结束颜色。

2、使用

a、举例：

<style type="text/css">
p{width: 300px;height: 100px;background-image:linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
<p>从左到右线性渐变背景</p>

b、一个非常酷的功能：用渐变制作导航分割线

background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px; 意思背景使用渐变色，然后不重复，居右，斜线后面的其实是background-size的设置，width 1px，height 15px

View Code

效果：

c、谷歌搜索低调的线性渐变背景

查看了一个google搜索的代码，写了个例子

View Code

二、径向渐变radial-gradient

待续

大漠写的css3 gradient

http://www.w3cplus.com/content/css3-gradient

转载于:https://www.cnblogs.com/zhangyuhang3/p/6910515.html

css3 Gradient背景相关推荐

Css3: gradient背景渐变
Css3: gradient背景渐变原文链接:http://kk073000.blog.163.com/blog/static/34826942012123111322691/ css3实现了背景渐 ...
css3 Gradient 背景渐变
学习笔记来源网:https://www.w3cplus.com/content/css3-gradient 起始点(Starting Point)的工作方式类似于background position ...
***CSS3 Gradient渐变色（转：http://www.w3cplus.com/content/css3-gradient）
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用CSS3 Gradi ...
css3实现背景渐变的方法
我们一般实现背景渐变的方法都是用图片来实现,这段时间在做项目中找到了一种用css3用颜色实现背景渐变的方法,主要支持Firefox和Safari/Chrome 等浏览器,ie用滤镜的方法来解决渐变的问 ...
CSS3中背景的四个新的属性
本文对CSS3中背景的四个新的属性进行了详细介绍. 多重背景图片 Css3中,对一个元素可以使用一张以上的背景图片.除了使用逗号将图片分开以外,其代码与css2相同.第一个声明的图片定位在元素的顶部, ...
（17）css3新增背景属性
一.背景半透明 CSS3支持背景半透明的写法,颜色值增加了一种 rgba 模式. rgba 模式:在 rgb基础上增加了一个不透明度的设置,不透明度 alpha 取值范围在 0-1 之间,0 表示完全 ...
CSS3 Gradient渐变
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变). http://www.w3cplus.com/content/css3-grad ...
css只设置背景图片半透明,css3实现背景图片半透明内容不透明的方法示例
上一个博客做登陆的页面是遇到的问题,突然想使用这种背景图片透明,而内容不透明的效果,这里我就说一说我的两个思路吧. 效果展示: 内容半透明内容不透明最常见的做法事设置元素的opacity,这种设置 ...
小tip:IE不支持CSS3多背景的替代解决方案
一.关于CSS3 Multiple backgrounds多背景 Multiple backgrounds多背景是CSS3中非常诱人的一个CSS属性,其目前相关浏览器兼容性如下表: 浏览器 Multi ...

css3 Gradient背景

一、线性渐变linear-gradient

二、径向渐变radial-gradient

css3 Gradient背景相关推荐

最新文章

热门文章