66CSS3的各种渐变

最新推荐文章于 2025-03-22 01:30:05 发布

转载最新推荐文章于 2025-03-22 01:30:05 发布 · 61 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/gushixianqiancheng/p/10967004.html

本文详细介绍了CSS3中的六种渐变效果，包括线性渐变、重复线性渐变、径向渐变、圆形径向渐变、椭圆形径向渐变以及重复径向渐变。通过具体的HTML代码示例，展示了如何使用这些渐变属性来丰富网页的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS3的渐变分为：（1）线性渐变，再分为重复线性渐变；（2）径向渐变，再分为圆形径向渐变、椭圆形径向渐变、重复径向渐变（A、宽高相等就是圆形重复径向渐变，B、宽高不相等就是椭圆形重复径向渐变）**html 代码**

```html:run
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3渐变汇总</title>
    <style>
        div{
            width:1000px;height:400px;color:white;
        }
    </style>
</head>
<body>
<div style="background-image: linear-gradient(to right,red,green,blue,purple,black)">
    1、线性渐变（最终到达位置，渐变颜色，渐变颜色，渐变颜色。。。）<br/>
    style="background-image: linear-gradient(to right,red,green,blue,purple,black)"
</div>
<div style="background-image: repeating-linear-gradient(red,green 50px,blue 100px,purple 150px,black 200px)">
    2、[重复]线性渐变（起点颜色，渐变颜色 开始位置，渐变颜色 开始位置，渐变颜色 开始位置。。。）<br/>
    style="background-image: repeating-linear-gradient(red,green 50px,blue 100px,purple 150px,black 200px)"
</div>
<div style="background-image: radial-gradient(red,green,blue,purple,black)">
    3、径向渐变（渐变颜色，渐变颜色，渐变颜色。。。）<br/>
    style="background-image: radial-gradient(red,green,blue,purple,black)"
</div>
<div style="background-image: radial-gradient(circle,red,green,blue,purple,black)">
    4、[圆形]径向渐变（圆形，渐变颜色，渐变颜色，渐变颜色。。。）<br/>
    style="background-image: radial-gradient(circle,red,green,blue,purple,black)"
</div>
<div style="background-image: radial-gradient(ellipse,red,green,blue,purple,black)">
    5、[椭圆形]径向渐变（椭圆形，渐变颜色，渐变颜色，渐变颜色。。。）<br/>
    style="background-image: radial-gradient(ellipse,red,green,blue,purple,black)"
</div>
<div style="background-image: repeating-radial-gradient(red,green 50px,blue 100px,purple 150px,black 200px)">
    6、[重复]径向渐变（起点颜色，渐变颜色 开始位置，渐变颜色 开始位置，渐变颜色 开始位置。。。）<br/>
    宽高相等就是重复圆形径向渐变,宽高不相等就是重复椭圆形径向渐变<br/>
    style="background-image: repeating-radial-gradient(red,green 50px,blue 100px,purple 150px,black 200px)"
</div>
</body>
</html>
```

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967004.html