CSS渐变(摘录)

    

CSS渐变

    发布时间 : 2015年10月24日 11:17:13     发布者 : kid               Web前端          设计                

CSS 渐变 是在 CSS3 Image Module 中新增加的 <image> 类型. 使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果. 用它代替图片，可以加快页面的载入时间、减小带宽占用。同时，因为渐变是由浏览器直接生成的，它在页面缩放时的效果比图片更好，因此你可以更加灵活、便捷的调整页面布局。

浏览器支持两种类型的渐变：线性渐变 (linear)，通过 linear-gradient 函数定义，以及 径向渐变 (radial)，通过 radial-gradient 函数定义.

线性渐变

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。

简单线性渐变

这里是一个线性渐变从中间（水平方向）和顶部（垂直方向）开始，起始于蓝色，过渡到白色.

屏幕截图	现场演示

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
background: -prefix-linear-gradient(top, blue, white); 

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
background: linear-gradient(to bottom, blue, white);

 

(查看 浏览器兼容列表 概述前缀的必要性以支持不同的浏览器版本)。

改变相同的渐变从左到右运行:

屏幕截图	现场演示

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
background: -prefix-linear-gradient(left, blue, white); 

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
background: linear-gradient(to right, blue, white);

 

(查看 浏览器兼容列表 概述前缀的必要性以支持不同的浏览器版本)。

你可以通过指定平行和垂直的开始位置让渐变倾斜，例如:

屏幕截图	现场演示

/* The old syntax, deprecated, but still needed, prefixed, for WebKit-based and old browsers */
background: -prefix-linear-gradient(left top, blue, white); 

/* The new syntax needed by standard-compliant browsers (Opera 12.1, IE 10, Fx 16 onwards), without prefix */
background: linear-gradient(to bottom right, blue, white);

 

使用角度

如果你不指定一个角度，这个将自动基于给定的方向。如果你更喜欢控制渐变的方向，你可以设置特定的角度。

例如，这两个渐变，第一个方向朝右，第二个有个70度的角。

右边的这个使用的是这样的CSS样式：

background: linear-gradient(70deg, black, white);

 

角度是指水平线与渐变线之间的角度，以逆时针方向旋转。总之，0deg 创建一个从底部到顶部的垂直渐变，当变成90deg时生成一个从左到右的水平渐变。

background: linear-gradient(<angle>, red, white);