您当前的位置:首页 > 网站建设笔记 >

CSS3 linear-gradient 线性渐变

来源:CSS3实战0

用CSS渐变来修饰

渐变是大家广为关注的CSS原生特性之一。渐变在设计中非常重要,它用来模仿光线落在弯曲或光泽的表面而呈现出的有趣的效果。虽然将它们运用在网页设计中的开发者不计其数,但这不足为奇。奇怪的是,在CSS3来临之前,网页开发者从来无法找到一个跨浏览器支持的、合理的、可编程化的办法来创造渐变。很早以前SVG就有渐变了,但直到IE9才得到IE的支持。

在那时,你只能面临两难的选择:要么采用SVGWeb这样的补丁解决方案来给IE做伪SVG,要么使用你想要的渐变图案作为重复背景图片。这些夕阳技巧虽不灵活,一开始也还管用,但很快就会变得笨重,特别是当你的老板对渐变色举棋不定时(天呐,还有一堆Photoshop活呢)或者你试着创建各种复杂的层次效果时。

再一次,CSS3以线性和径向渐变解决了这个问题,它们定义于CSS图像值和内容替代模块中。要见识CSS渐变的灵活性,好好体会本章中的例子吧。首先让我们分别来了解这两种不同的渐变。

线性渐变

线性渐变是这两种类型中较简单的一种。这些是色彩的平滑过渡,从一个区域的一边或一个角落开始在两个或更多颜色之间平滑地过渡并在另一边或另一个角落结束。

CSS渐变的工作方式也是一样的。本质上来说,CSS渐变是一种特殊的背景图片,你完全可以把它放在任何一个图片能工作的位置,例如,background-image和border-image。

线性渐变最常用作标准、常见的背景,如下是一个简单的语法例子:
background:linear-gradient(#ffffff,#aaaaaa);
效果如下所示。这两个颜色分别是渐变的起始色和结束色,默认情况下,渐变的起始色从容器的顶部逐渐向底部过渡到结束色。

 

线性渐变的角度

如果你要改变渐变的方向,你可以在起始色前添加一个角度值,就像这样:
background:linear-gradient(to bottom right, #ffffff, #aaaaaa);
这个角度值让渐变从左上角向右下角过渡。

正如你所想的,你可以举一反三地使用这些渐变角度关键词:

  • to bottom(默认)
  • to top
  • to left
  • to right
  • to top left
  • to top right
  • to bottom left
  • to bottom right

如下所示:

 
to bottom
从顶部向底部过渡
 
to top
从底部向顶部过渡
 
to left
从右边向左边过渡
 
to right
从左边向右边过渡

 
to top left
从右下角向左上角过渡
 
to top right
从左下角向右上角过渡
 
to bottom left
从右上角向左下角过渡
 
to bottom right
从左上角向右下角过渡

你还可以用角度来定义想要的渐变过渡方向。0度(0deg)等同于to top;角度会沿顺时针方向随着你的角度的增加而增加。因此随后的一系列等式是成立的:90deg=to right,180deg=to bottom,270deg=to left。要注意的是,135deg不一定(像你想的那样)等于to bottom right,除非容器是一个正方形:对角线关键词会改变角度以确保渐变一直是从一个角落向另一个角落过渡。因此,你可以根据想要创建的效果来选择使用关键词还是角度值。

 
0度(0deg)
等同于to top,从底部向顶部过渡
 
90度(90deg)
等同于to right,从左边向右边过渡
 
180度(180deg)
等同于to bottom,从顶部向底部过渡
 
270度(270deg)
等同于to left,从右边向左边过渡

 
45度(45deg)
等同于to top right,从左下角向右上角过渡
 
135度(135deg)
等同于to bottom right,从左上角向右下角过渡
 
225度(225deg)
等同于to bottom left,从右上角向左下角过渡
 
315度(315deg)
等同于to top left,从右下角向左上角过渡

线性渐变颜色节点

你还可以在起始色和结束色之间加入多个色彩节点,比如:
background:linear-gradient(to right,#ffffff,#eeeeee 40%,#aaaaaa 70%,#cccccc);
效果如下所示:

 

单位值定义了色彩节点到渐变起始色的距离。请注意,百分比值是可选的,如果你不定义,色彩节点会沿着渐变均匀分布。

除了百分比,你还可以根据情况使用任何其他单位。默认情况下,第一个值和最后一个值分别是0%和100%,但你也可以改变它们的位置,例如:
background:linear-gradient(to right,#339900 50px,#006699 50px,#006699 100px,#996600 100px);
这样就能产生从左到右的三个填充色彩的效果(如下所示)。将绿色节点设置到50px的位置,并从头至此保持一致的颜色。棕色节点设置在100px的位置,并从此到结束保持一致的颜色。我还在中间插入了两个蓝色节点来保证中间的色带是全蓝的。这是一个非常实用的技巧,特别是当你想要创建一些更复杂、有趣的重复背景图样时。

 

你甚至还可以通过负单位值来实现渐变从容器外起始或结束。(你可能需要在鼠标停留的时候改变渐变,但不幸的是你不能创建平滑的渐变动画。)

在这里我还得再次赞叹使用透明色的强大之处,只需一点变化就能让简单的渐变大不相同:
background:linear-gradient(to top right,rgba(0,0,0,0.7),rgba(0,0,0,0));background-color:#ff0000;

 

这是一个覆盖在实色背景上的透明渐变,以产生不同的渐变色。这个技巧非常强大,意味着你仅需改变背景色就能改变整个区域的视觉效果。若你想给网站的不同页面提供丰富的视觉感受,这是最事半功倍的办法,试试吧!

提示:请记得,即便你的渐变是不透明的,也要为渐变分开引用一个适合的背景色属性。以作为浏览器不支持CSS渐变时的备用机制,确保内容的可读性。

重复线性渐变

重复线性渐变的语法和线性渐变的类似,请参看下面的例子和效果:
background:repeating-linear-gradient(-45deg, #EFC1CB, #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px, #F2F2F2 70px, #F2F2F2 80px);
只定义了80px的渐变值,但却从起始一直重复到容器边缘。

 

建站咨询

在线咨询真诚为您提供专业解答服务

咨询热线

137 1731 25507×24小时服务热线

微信交流

二维码终于等到你,还好我没放弃
返回顶部