css3渐变在线生成器

CSS3渐变在线生成器是一款十分实用的工具，帮助你快速生成想要的渐变效果，无需手动编写CSS代码。下面介绍一下如何使用这款工具。

/* CSS3渐变在线生成器 */background: -webkit-linear-gradient(red, orange);
     /* Safari 5.1 - 6.0 */background: -o-linear-gradient(red, orange);
     /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(red, orange);
     /* Firefox 3.6 - 15 */background: linear-gradient(red, orange);
     /* 标准的语法 */ 

首先，打开CSS3渐变在线生成器的网站，网址为：http://www.colorzilla.com/gradient-editor/。

可以看到，在页面中央出现了一个渐变效果的示例，左侧为调整属性的窗口，右侧为预览窗口。调整属性时，右侧预览窗口会实时更新。

在调整属性时，需要注意一些常用的属性：

/* 线性渐变 */background: linear-gradient(to bottom, red, orange);
     /* 从上到下 */background: linear-gradient(to top, red, orange);
     /* 从下到上 */background: linear-gradient(to left, red, orange);
     /* 从右到左 */background: linear-gradient(to right, red, orange);
     /* 从左到右 *//* 径向渐变 */background: radial-gradient(red, orange);
     /* 默认为圆形 */background: radial-gradient(ellipse, red, orange);
     /* 指定为椭圆形 */ 

渐变效果可以由两、三、四个颜色组成，可以通过选择颜色或输入颜色的方式来设置。另外，可以调整渐变的角度、颜色位置等属性。

最后，将生成的CSS代码复制粘贴到CSS文件中即可使用。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！