小程序设置view渐变色

最新推荐文章于 2024-03-01 19:24:21 发布

培根芝士

最新推荐文章于 2024-03-01 19:24:21 发布

阅读量1.7k

点赞数

分类专栏：小程序

本文链接：https://blog.csdn.net/watson2017/article/details/118106979

版权

41 篇文章 3 订阅

订阅专栏

本文深入介绍了CSS中的线性渐变和径向渐变的使用方法，包括从上到下、从左到右、指定角度、多个颜色以及带透明度的线性渐变。同时，也展示了圆形径向渐变和重复径向渐变的实现。通过实例代码，读者可以轻松理解并应用到自己的项目中，提升网页设计的视觉效果。

摘要由CSDN通过智能技术生成

从上到下（默认）

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(red, blue);
}

从左到右

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(to right, red, blue);
}

对角（从左上到右下）

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(to bottom right, red, blue);
}

指定角度

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(120deg, red, blue);
}

多个颜色的线性渐变

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(red, yellow, blue);
}

带透明度的线性渐变

.content {
    width: 240px;
    height: 240px;
    background: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1));
}

重复线性渐变（repeating-linear-gradient）

.content {
    width: 240px;
    height: 240px;
    background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

颜色结点均匀分布（默认）

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(red, green, blue);
}

颜色结点不均匀分布

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(red 5%, green 15%, blue 60%);
}

圆形径向渐变

.content {
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, red, yellow, green);
}

重复径向渐变（repeating-radial-gradient）

.content {
    width: 240px;
    height: 240px;
    background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

关注

专栏目录