首页 > 代码库 > css3 Gradient背景

css3 Gradient背景

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

 

css3 Gradient背景