css3 渐变 在线

CSS3渐变是CSS3中一个非常强大的功能，它可以让我们在设计网页时运用非常鲜明的颜色，给网页带来更加艺术的氛围。渐变与边框、颜色等属性一样，也是CSS3中的一种属性，使用起来并不难，下面来简单介绍一下渐变的用法。

在CSS3中，渐变可以通过两个属性来设置，分别是背景颜色(background)和背景图片(background-image)。其中，CSS3中支持两种类型的渐变，分别是线性渐变和径向渐变。下面分别来介绍一下这两种渐变类型。

线性渐变：

background: linear-gradient(direction, color-stop1, color-stop2, ..., color-stopN);
    

其中，direction表示渐变方向，可以是to left、to right、to top、to bottom等等。color-stop表示颜色停止点，可以是颜色值或百分比值。例如：

background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    

这个代码表示从左到右渐变的七彩渐变色格效果。还可以通过百分数来设置渐变效果，例如：

background: linear-gradient(135deg, white 25%, black 25%, black 50%, white 50%, white 75%, black 75%);
    

这个代码表示从左下方而上的斜向的半黑白渐变，非常的艺术感。

径向渐变：

background: radial-gradient(shape size at position, start-color, ..., last-color);
    

shape表示辐射形状，可以是circle、ellipse等；size表示辐射的大小，可以是类似于50%这样的百分数，也可以是像100px这样的像素值；position表示辐射的起始点，可以是类似于50% 50%这样的百分数，也可以是像100px 100px这样的像素值。例如：

background: radial-gradient(circle, red, orange, yellow, green, blue, indigo, violet);
    

这个代码表示的就是一个圆形辐射的七彩渐变色格效果，非常好看。

以上就是CSS3中渐变的基本用法，可以根据需要来灵活运用，给网页带来更为精彩的视觉体验。

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