CSS 图像高级 CSS 渐变
CSS 渐变
CSS 渐变是在 CSS3 Image Module 中新增加的 <image> 类型。
使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。用渐变代替图片，可以加快页面的载入时间、减小带宽占用。
同时，因为渐变是由浏览器直接生成的，渐变在页面缩放时的效果比图片更好，可以更加灵活、便捷的调整页面布局。
浏览器支持两种类型的渐变：
- 线性渐变 (linear)，通过 linear-gradient 函数定义
- 径向渐变 (radial)，通过 radial-gradient 函数定义
线性渐变
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的<image>数据类型。
linear-gradient函数的语法：
|
1
|
linear-gradient (方向或角度,颜色1,颜色2,...颜色n,背景图片) |
其中背景图片是可选的。
下面的代码演示了线性渐变的用法。
<!DOCTYPE html><html> <head> <title>线性渐变</title> <style type="text/css"> body{ padding:20px; } div{color:#fff;} div.one{ width:100%; height:150px; border:1px solid #000; background: linear-gradient(to bottom, blue, white); } div.two{ width:100%; height:150px; border:1px solid #000; background: linear-gradient(to right, blue, white); } div.three{ width:100%; height:150px; border:1px solid #000; background: linear-gradient(30deg, #000, #ff0000); } div.four{ width:100%; height:150px; border:1px solid #000; background: linear-gradient(to right, red, orange, yellow, green,white, blue); } div.five{ color:#000; width:418px; height:150px; border:1px solid #000; background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)), } </style> </head> <body> <h1>软件开发，成就梦想</h1> <div class="one">从上到下</div> <div class="two">从左到右</div> <div class="three">角度 30度</div> <div class="four">色标</div> <div class="five">背景图片渐变</div> </body></html>计算结果：
色标，在渐变中，可以使用两种以上的颜色，这就是色标。
渐变加透明，效果更好，透明是通过背景颜色来实现，其中0是不透明，1是100%透明。
