H5 CSS3 渐变的使用

阅读更多

CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。
以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的事件和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
CSS3 定义了两种类型的渐变(gradients):
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
径向渐变(Radial Gradients)- 由它们的中心定义

 





从上到下的线性渐变



效果图:
H5 CSS3 渐变的使用_第1张图片
 





一个带有彩虹颜色和文本的线性渐变



效果图:
H5 CSS3 渐变的使用_第2张图片
 





使用透明度



效果图:
H5 CSS3 渐变的使用_第3张图片
 





径向渐变



效果图:
H5 CSS3 渐变的使用_第4张图片
 

 

 

 

 

 

 

  • H5 CSS3 渐变的使用_第5张图片
  • 大小: 17.8 KB
  • H5 CSS3 渐变的使用_第6张图片
  • 大小: 19.3 KB
  • H5 CSS3 渐变的使用_第7张图片
  • 大小: 16.9 KB
  • H5 CSS3 渐变的使用_第8张图片
  • 大小: 18.1 KB
  • demo.rar (2.4 KB)
  • 下载次数: 1
  • 查看图片附件

你可能感兴趣的:(CSS3渐变,径向渐变,线性渐变)