css3渐变(css渐变属性有几种)

css3渐变(css渐变属性有几种)

1、时下，渐变，效果在页面设计中已经变得越来越常见了。而且现在的3对于渐变的支持也已经足够的丰富了。虽然我们可能使用过3中的-属性或-属性，但其实3中的渐变功能比我们想象的要强大的多，加以利用会实现很多有趣好玩的东西。本文就来讨论3中的渐变。

2、首页的按钮和导航栏都使用了渐变。如果你之前使用过3的渐变，对于下面的代码一定有所了解：。

3、他的运行结果如下：。这是一个由上到下、由金色到粉色的渐变色块。

4、-()方法的语法看上去还是很清晰的——从某个颜色渐变到另一个颜色。但是如果要实现下面的几种渐变效果该如何做呢。这个是由左到右渐变的色块，并且渐变过程只发生在中间一小部分内。

5、这个是由中心向外渐变的色块。这是一个类似“桌布”的，他也是利用渐变来实现的。我们先来看看-的完整语法：。在语法的说明中，尖括号括起来的部分代表数据类型，如代表角度数据类型，代表图像数据类型。

css3渐变(css渐变属性有几种)

1、关于更多的数据类型，可以查看的文档。| 这个在上面的代码示例中并没有使用，它是用来描述渐变发生的方向或角度的。

2、未指定时，默认是由上至下进行渐变。关于角度单位不仅只有，还有和，比如顺时针旋转90°的话，下面三种是同样的效果，90、100、再比如顺时针旋转一周的话，360°，下面三种也是同样的效果，360、400、1。此图解释了渐变角度的计算方式。通过以上对于-的解释，让我们重新考虑一下上面提到的色块如何实现。

3、这个是由左到右渐变的色块，并且渐变过程只发生在中间一小部分内。根据描述，我们可以知道下面的信息：。所以代码可以写成下面的样子：。

4、至此，我们已经研究的渐变都是基于直线方向上的渐变。然而在实际应用场景中，还有为 提供的功能都远远超过这个范畴。实际情况是，渐变可分为三大类：。

5、此图解释了各类渐变的表象。接下来，来说一说其他几类渐变。语法说明看上去很难懂，可以简化一下：。