本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

css渐变色背景gradient的介绍

css 来源：互联网 作者：佚名 发布时间：2025-02-12 22:33:30 人浏览
摘要

使用渐变色作为背景 可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色background-color的属性值 ） CSS 渐变是一种从一种颜色平

使用渐变色作为背景

可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色background-color的属性值 ）
CSS 渐变是一种从一种颜色平滑过渡到另一种颜色的效果，由 <gradient> 数据类型表示，它是 <image> 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。

  • linear-gradient() 创建线性渐变
  • radial-gradient() 创建径向渐变
  • conic-gradient() 创建锥形渐变

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS Gradients</title>

    <style>

      /*  线性渐变 */

        .linear-gradient {

            width: 200px;

            height: 200px;

            background: linear-gradient(to right, red, blue);

        }

      /* 径向渐变 */

        .radial-gradient {

            width: 200px;

            height: 200px;

            background: radial-gradient(circle, red, blue);

        }

    </style>

</head>

<body>

    <div class="linear-gradient"></div>

    <div class="radial-gradient"></div>

</body>

</html>

显示效果：

image.png

线性渐变（Linear Gradient）

线性渐变是沿着一条直线的颜色过渡。你可以指定多个颜色点来创建复杂的渐变效果。

1

2

3

4

5

6

7

8

/* 从左到右的线性渐变，从红色到蓝色 */

background: linear-gradient(to right, red, blue);

/* 从上到下的线性渐变，从红色到蓝色 */

background: linear-gradient(to bottom, red, blue);

/* 45度角的线性渐变，从红色到蓝色 */

background: linear-gradient(45deg, red, blue);

/* 多个颜色点的线性渐变 */

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

显示效果：

image.png

image.png

image.png

image.png

径向渐变（Radial Gradient）

径向渐变是从中心向外扩展的颜色过渡。

1

2

3

4

5

6

/* 从中心向外的径向渐变，从红色到蓝色 */

background: radial-gradient(circle, red, blue);

/* 椭圆形径向渐变，从红色到蓝色 */

background: radial-gradient(ellipse, red, blue);

/* 多个颜色点的径向渐变 */

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

显示效果：

image.png

锥形渐变

锥形渐变是一种围绕中心点旋转的颜色渐变，类似于饼图的效果。

1

2

3

4

/* 基本用法  */

background: conic-gradient([起始角度,] 色值1 位置1, 色值2 位置2, ...);

/* 简单锥形渐变 */

background: conic-gradient(red, yellow, green, blue);

显示效果：

image.png

更多渐变控制

你可以通过指定颜色点的位置来获得更多的控制。

1

2

3

4

5

6

/* 线性渐变，指定颜色点的位置 */

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

/* 径向渐变，指定颜色点的位置 */

background: radial-gradient(circle, red 0%, yellow 50%, green 100%);

/* 锥形渐变，指定起始角度和颜色点的位置 */

background: conic-gradient(from 45deg, red 0%, yellow 25%, green 50%, blue 75%);

显示效果：

image.png

重复渐变（Repeating Gradients）

CSS 还支持重复渐变，可以创建条纹或其他重复图案。

1

2

3

4

/* 重复线性渐变 */

background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);

/* 重复径向渐变 */

background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);

显示效果：

image.png

通过这些示例，你可以创建各种各样的渐变效果来美化你的网页。

更多

gradients.app 是一个在线工具，用于生成和定制各种渐变效果。这个网站提供了一个直观的用户界面，允许用户创建线性渐变、径向渐变和锥形渐变，并可以实时预览和调整这些渐变的颜色、角度和其他参数。
漂亮的CSS和PNG渐变色，适用于网站 / Instagram / Photoshop — Gradients.app
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • css实现渐变色圆角边框

    css实现渐变色圆角边框
    渐变色圆角边框(内容区域圆角) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 !DOCTYPE html html lang=en head meta charset=UTF-8 t

  • css渐变色背景gradient的介绍

    css渐变色背景gradient的介绍
    使用渐变色作为背景 可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色

  • CSS3中使用flex和grid实现等高元素布局的代码

    CSS3中使用flex和grid实现等高元素布局的代码
    一、简单的两列实现 1、先看页面效果 2、css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { padding: 10px; width: 100ch; margin: 0 auto; box-shadow: i

  • css grid网格布局(栅格布局)的代码

    css grid网格布局(栅格布局)的代码
    CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使

  • css实现图片旋转功能的代码

    css实现图片旋转功能的代码
    一 css实现图片旋转90度 1 2 3 4 .icon{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 二 水平翻转 1 2 3 4 5 6 7 8 9 .icon { color: #f64e78; font-size
  • CSS自定义浏览器滚动条样式的代码
    CSS自定义浏览器滚动条样式指南 在现代网页设计中，细节决定成败。滚动条作为用户与页面交互的重要组成部分，其样式往往被忽视。本文
  • CSS background-size属性介绍
    background-size是 CSS 中一个非常重要的属性，用于控制元素背景图片的尺寸。通过设置background-size，开发者可以根据布局需求，灵活地调整背景
  • CSS border边框的全面指南介绍
    CSS 是前端开发中不可或缺的工具，而border属性则是控制元素边框的核心之一。通过灵活使用border，开发者可以为网页布局带来丰富的视觉效
  • CSS中隐藏滚动条的同时保留滚动功能
    在CSS中，我们可以通过一些技巧来隐藏滚动条，同时保留滚动功能。以下是几种常用的方法和具体的实现步骤。 1. 使用overflow和::-webkit-scr

  • CSS布局技巧实现元素左右排列的方法

    CSS布局技巧实现元素左右排列的方法
    开发中经常会遇到一个场景，使用 CSS 实现一个子元素靠右，其余子元素靠左。 这里总结一下常见的实现方式。 1. flex 布局 flexbox 是一种常
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计