css3有哪两种渐变

CSS3是一个非常强大的样式语言，它可以使网页设计变得更加美观和生动。其中，CSS3渐变是非常常用的一种技巧，它可以帮助我们轻松实现各种颜色过渡效果。CSS3渐变有两种，分别是线性渐变和径向渐变。

/* 线性渐变 */background: linear-gradient(to right, #ffffff, #000000);
    /* 坡度自定义 */background: linear-gradient(45deg, #ffffff, #000000);
    /* 设置多个坡度 */background: linear-gradient(to right, #ffffff, #000000 40%, #ffffff);
    /* 设置方向 */background: linear-gradient(to top, #ffffff, #000000);
    

上面是线性渐变的常见应用方法，其中to right表示颜色的过渡方向是从左到右，可以自定义为to bottom、to top、to left，而坡度的角度也可以自定义。在多个坡度调用时，可以设置颜色位置。

/* 径向渐变 */background: radial-gradient(circle, #ffffff, #000000);
    /* 方为椭圆形 */background: radial-gradient(ellipse, #ffffff, #000000);
    /* 圆心位置 */background: radial-gradient(at top left, #ffffff, #000000);
    /* 自定义形状 */background: radial-gradient(50% 50%, circle contain, #ffffff, #000000);
    

径向渐变跟线性渐变相类似，但是它的过渡部分是由内向外逐渐增加颜色的，因此呈现出来的效果是一个放射状的渐变，可以用于创建各种形状的过渡效果，比如圆形、椭圆形、方形等。

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