前端CSS3 渐变详解

文章目录

  • CSS3 渐变详解
    • 一、引言
    • 二、CSS3 渐变基础
      • 1、线性渐变
        • 1.1、基本线性渐变
        • 1.2、改变渐变方向
      • 2、径向渐变
        • 2.1、基本径向渐变
        • 2.2、设置径向渐变的中心
    • 三、高级渐变技巧
      • 1、重复渐变
        • 1.1、重复线性渐变
        • 1.2、重复径向渐变
    • 四、总结

CSS3 渐变详解

在这里插入图片描述

一、引言

在现代网页设计中,CSS3 渐变提供了一种强大而灵活的方式来创建平滑的颜色过渡效果。与传统的图像文件相比,CSS3 渐变不仅可以减少页面加载时间,还能在不同设备和分辨率下保持更好的视觉效果。本文将详细介绍 CSS3 渐变的使用方法,包括线性渐变、径向渐变以及它们的重复渐变形式。

二、CSS3 渐变基础

在这里插入图片描述

1、线性渐变

线性渐变是最常见的渐变类型,它从一个点开始,沿着直线过渡到另一个颜色。默认情况下,线性渐变的方向是从上到下,但可以通过调整参数来改变方向。

1.1、基本线性渐变

以下是一个简单的线性渐变示例,从蓝色过渡到粉红色:

div {width: 120px;height: 120px;background: linear-gradient(blue, pink);
}
1.2、改变渐变方向

你可以通过指定方向来改变渐变的方向,例如从左到右:

div {width: 120px;height: 120px;background: linear-gradient(to right, blue, pink);
}

在这里插入图片描述

2、径向渐变

径向渐变与线性渐变不同,它从一个中心点向外辐射。这种渐变类型适合创建圆形或椭圆形的渐变效果。

2.1、基本径向渐变

以下是一个简单的径向渐变示例,从红色过渡到蓝色:

div {width: 120px;height: 120px;background: radial-gradient(red, blue);
}
2.2、设置径向渐变的中心

你可以通过 at 关键字来指定径向渐变的中心位置:

div {width: 120px;height: 120px;background: radial-gradient(at center, red, blue);
}

三、高级渐变技巧

1、重复渐变

CSS3 还支持重复渐变,这意味着你可以创建周期性的渐变效果。

1.1、重复线性渐变

以下是一个重复线性渐变的示例,创建了一个周期性的红蓝条纹效果:

div {width: 120px;height: 120px;background: repeating-linear-gradient(-45deg, red 0px, red 5px, blue 5px, blue 10px);
}
1.2、重复径向渐变

同样,径向渐变也可以重复:

div {width: 120px;height: 120px;background: repeating-radial-gradient(red, red 5px, blue 5px, blue 10px);
}

四、总结

CSS3 渐变是一种强大的工具,它不仅可以减少网页的加载时间,还能提供更丰富的视觉效果。通过线性渐变、径向渐变以及它们的重复形式,设计师可以创造出几乎无限的颜色过渡效果。掌握这些技巧,可以让你的网页设计更加生动和吸引人。


版权声明:本博客内容为原创,转载请保留原文链接及作者信息。

参考文章

  • MDN Web Docs - 使用 CSS 渐变
  • 菜鸟教程 - CSS3 渐变

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468448.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

openpyxl处理Excel模板,带格式拷贝行和数据填入

本文中用openpyxl操作Excell 模板,进行行拷贝和数据填充. 主要涉及单元格格式的拷贝,合并单元格的拷贝,行高和列宽的处理. 将模板表格分为三部分,头部,中间循环填充部分,尾部.模板参数中设置头部高度,循环部分高度,剩余为尾部. 拷贝时先拷贝填充头部 ,然后根据数据循环拷贝填…

IEEE 1588:电信网络的精确时间协议 (PTP)

IEEE 1588:电信网络的精确时间协议 IEEE 1588 PTP 概述PTP 协议特征同步类型IEEE 1588 PTP 角色IEEE 1588 PTP 的工作原理PTP 设备类型PTP 消息类型事件消息一般信息 PTP 时钟类规范PTP 配置文件 https://www.techplayon.com/ieee-1588-precision-time-protocol-ptp…

DataFrame

目录 一、创建DataFrame二、Sql语法三、DSL语法四、RDD与DataFrame互相转换 一、创建DataFrame 在SparkSql中SparkSession是创建DataFrame和执行Sql的入口,创建DataFrame有三种方式: 通过Spark的数据源进行创建 从一个存在的RDD进行转换 从Hive Tabl…

Redis 高并发分布式锁实战

目录 环境准备 一 . Redis 安装 二:Spring boot 项目准备 三:nginx 安装 四:Jmeter 下载和配置 案例实战 优化一:加 synchronized 锁 优化二:使用 redis 的 setnx 实现分布式锁 优化三:使用 Lua 脚本…

参数估计理论

估计理论的主要任务是在某种信号假设下,估算该信号中某个参数(比如幅度、相位、达到时间)的具体取值。 参数估计:先假定研究的问题具有某种数学模型, 如正态分布,二项分布,再用已知类别的学习样…

[vulnhub] DarkHole: 2

https://www.vulnhub.com/entry/darkhole-2,740/ 端口扫描主机发现 探测存活主机,185是靶机 # nmap -sP 192.168.75.0/24 Starting Nmap 7.94SVN ( https://nmap.org ) at 2024-11-08 18:02 CST Nmap scan report for 192.168.75.1 Host is up (0.…

【温度表达转化】

【温度表达转化】 C语言代码C代码Java代码Python代码 💐The Begin💐点点关注,收藏不迷路💐 利用公式 C5∗(F−32)/9 (其中C表示摄氏温度,F表示华氏温度) 进行计算转化。 输出 输出一行&#x…

【Promise】JS 异步之宏队列与微队列

文章目录 1 原理图2 说明3 相关面试题3.1 面试题13.2 面试题23.3 面试题33.4 面试题4 1 原理图 2 说明 JS 中用来存储待执行回调函数的队列包含 2 个不同特定的队列:宏队列和微队列。宏队列:用来保存待执行的宏任务(回调),比如:定…

【Linux】Linux入门实操——vim、目录结构、远程登录、重启注销

一、Linux 概述 1. 应用领域 服务器领域 linux在服务器领域是最强的,因为它免费、开源、稳定。 嵌入式领域 它的内核最小可以达到几百KB, 可根据需求对软件剪裁,近些年在嵌入式领域得到了很大的应用。 主要应用:机顶盒、数字电视、网络…

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver(二)

ubuntu下aarch64-linux-gnu(交叉编译) gdb/gdbserver(二) 本教程作为gdb/gdbserver编译安装教程的一个补充,教会大家如何使用gdb/gdbserver进行远程调试。 如上图所示,我们需要将编译后的gdbserver上传至目标设备,其上…

Flutter错误: uses-sdk:minSdkVersion 16 cannot be smaller than version 21 declared

前言 今天要做蓝牙通信的功能,我使用了flutter_reactive_ble这个库,但是在运行的时候发现一下错误 Launching lib/main.dart on AQM AL10 in debug mode... /Users/macbook/Desktop/test/flutter/my_app/android/app/src/debug/AndroidManifest.xml Err…

c中柔性数组

c99中,结构中最后一个元素允许是未知大小的数组,这就叫柔性数组成员。 柔性数组的特点 1.结构中柔性数组前必须至少有一个其他成员 2.sizeof返回的这种结构大小不包括柔性数组的内存 3.包含柔性数组成员的结构用malloc函数进行动态分配,并…

WPS 默认模板修改

重装系统把word自定义样式搞没了,安装office时间太长,转战wps 解决方案 打开wps 点击【新建】word空白文档 设置修改你自己的样式 点击文件–另存为–Microsoft Word 带宏的模板文件(*.dotm) 另存路径为如下: 查…

Ubuntu24.04网络异常与应对方案记录

PS: 参加过408改卷的ZJU ghsongzju.edu.cn 开启嘲讽: 你们知道408有多简单吗,操作系统真实水平自己知道就行~~ Requested credits of master in UWSC30,in ZJU24,domestic master is too simple ubuntu安全软件 在 U…

[C++11] Lambda 表达式

lambda 表达式(Lambda Expressions)作为一种匿名函数,为开发者提供了简洁、灵活的函数定义方式。相比传统的函数指针和仿函数,lambda 表达式在简化代码结构、提升代码可读性和编程效率方面表现出色。 Lambda 表达式的基本语法 在…

Docker平台搭建方法

Docker平台搭建方法 1.1在VMware中创建两个虚拟机,只需要1个网卡,连接192.168.200.0网络。 虚拟机分配2个CPU,2G内存,60G硬盘,主机名分别为server和client,IP地址分别为192.168.200.137和192.168.200.138。server节点还兼做regis…

【学习笔记】Kylin-Desktop-V10-SP1 麒麟系统知识4——设备设置

提示:学习麒麟Kylin-Desktop-V10-SP1系统设备设置相关知识,包含设备设置进入方法、配置打印机、设置鼠标、键盘相关参数(包含输入法的配置)、以及管理快捷键组合、和多屏协同相关配置 一、前期准备 成功安装麒麟系统&#xff08…

Linux应用项目之量产工具(一)——显示系统

目录 前言 项目特点及介绍 ① 简单易用 ② 软件可配置、易扩展 ③ 纯 C 语言编程 软件总框架 显示系统 1.数据结构抽象 disp_manager.h 2.Framebuffer编程 framebuffer.c 3.显示管理 disp_manager.c 4.单元测试 disp_test.c 顶层目录Makefile 顶层目录Makefil…

企微SCRM价格解析及其性价比分析

内容概要 在如今的数字化时代,企业对于客户关系管理的需求日益增长,而企微SCRM(Social Customer Relationship Management)作为一款新兴的客户管理工具,正好满足了这一需求。本文旨在为大家深入解析企微SCRM的价格体系…

leetcode92:反转链表||

给你单链表的头指针 head 和两个整数 left 和 right &#xff0c;其中 left < right 。请你反转从位置 left 到位置 right 的链表节点&#xff0c;返回 反转后的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], left 2, right 4 输出&#xff1a;[1,4,3,2…