首页 > 代码库 > 详解CSS3渐变

详解CSS3渐变

2024-10-25 08:41:39   209人阅读

渐变，指形状或颜色的有规律性的变化，往往可以给人很强的节奏感和审美情趣，这里研究的主要是颜色的渐变。渐变的形式在日常生活中很常见，在网页中的用的也很多，传统网页技术中往往用图片来实现渐变，容易带来加载负担和动态定制的瓶颈。
CSS3提供了实现渐变的属性，随着浏览器的逐步支持，研究CSS3渐变已势在必行。涉及CSS渐变的属性主要有linear-gradient、radial-gradient、repeating-linear-gradient、repeating-radial-gradient四个属性，下面来分别解析下，也可以直接看案例。
一、linear-gradient线性渐变
 1.兼容性
现在最新的浏览器开始逐渐的支持线性渐变属性，并且趋向统一，兼容性表格参见caniuse.com
技术分享可见，对于最新的浏览器而言，使用-webkit-前缀和标准属性即可实现。但是为了兼容性旧浏览器起见，建议使用全前缀。
在sublime text3中可以使用lg(#0f0,#00f)可以生成以下代码，最佳的渐变书写方法。
[css] view plaincopy
  1. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0f0), to(#00f));          /*for Safari 4+, Chrome 2+*/  
  2. background-image: -webkit-linear-gradient(#0f0, #00f);                                  /*for Safari 5.1+, Chrome 10+*/  
  3. background-image: -moz-linear-gradient(#0f0, #00f);                                     /*for firefox*/  
  4. background-image: -o-linear-gradient(#0f0, #00f);                                       /*for opera*/  
  5. background-image: linear-gradient(#0f0, #00f);                                          /*标准属性*/  
2.语法
技术分享
1. 可选参数，设置渐变的形式，可以有两种方式，一种是设置旋转的角度，一种是使用关键字。
角度值，0度代表水平从左到右，90度代表垂直从下到上，从0度开始逆时针角度变换。
关键字，left代表从左到右的渐变，top代表从上到下的渐变，right代表从右到左，bottom代表从上到下；left top代表从左上到右下的渐变，left bottom代表从左下到右上的渐变，right top代表从右上到左下，right bottom代表从右下到左上。
2.设置第一个颜色点，渐变开始的颜色。
3.可选参数，设置中间颜色点
4.可选参数，设置中间颜色的位置
5.设置结束点颜色
一个线性渐变至少需要制定两个颜色值。
二、Radial Gradients-径向渐变
1.兼容性，径向渐变和线性渐变的兼容性是一致的，最新浏览器的兼容需要实现-webkit和标准两种写法。
技术分享
2.语法
技术分享
1.可选参数，设置渐变的中心，60px 45px指距离左侧60px距离上部45px，单位可以是像素，也可以是百分比，也可是关键字。默认为中心位置。
2.可选参数，渐变的形状，可以取值为circle或eclipse，默认值为eclipse。
3.可循参数，渐变的大小，可以取值为
closest-side：
指定径向渐变的半径长度为从圆心到离圆心最近的边
closest-corner：
指定径向渐变的半径长度为从圆心到离圆心最近的角
farthest-side：
指定径向渐变的半径长度为从圆心到离圆心最远的边
farthest-corner：
指定径向渐变的半径长度为从圆心到离圆心最远的角
contain：
包含，指定径向渐变的半径长度为从圆心到离圆心最近的点。类同于closest-side
cover：
覆盖，指定径向渐变的半径长度为从圆心到离圆心最远的点。类同于farthest-corner4.起始颜色。
5.中间颜色。6.中间颜色位置。可选。
7.终点颜色。
三、案例
重点解析下案例9，实现步骤和最终效果如下图所示。
技术分享技术分享
[css] view plaincopy
  1. #demo9{  
  2.     background-color: #026873;  
  3.     background-size: 13px, 29px, 37px, 53px;  
  4.     background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%);  
  5. }  
[css] view plaincopy
  1. #demo9{  
  2.     background-color: #026873;  
  3.     background-size: 13px, 29px, 37px, 53px;  
  4.     background-image:   
  5.         linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),  
  6.         linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%);  
  7. }  
四、延伸阅读
》w3 css-images-3
》gradient

CSS3渐变，前端开发whqet，做最好的前端开发blog。
前端开发whqet，关注前端开发技术 分享网页相关资源。

详解CSS3渐变


联系
我们