如何用CSS样式实现一个优雅的渐变效果?

工作站 (15).jpg
在这里插入图片描述

CSS渐变效果

CSS渐变(Gradients)是一种让两种或多种颜色平滑过渡的视觉效果,广泛应用于网页背景、按钮、边框等,以创造丰富的视觉体验。CSS提供了线性渐变(Linear Gradients)和径向渐变(Radial Gradients)两种主要类型。

image.png

基本语法

线性渐变(Linear Gradient)

线性渐变使颜色沿直线方向过渡。

其基本语法如下:

background: linear-gradient(direction, color-stop1, color-stop2, ...);
  • direction:定义了渐变的方向,具体包括以下两种,关键词和角度值:

    1. 关键词:
    • to top: 渐变从下到上。
    • to right: 渐变从左到右。
    • to bottom: 渐变从上到下(默认值)。
    • to left: 渐变从右到左。
    • to top left: 渐变从右下到左上。
    • to top right: 渐变从左下到右上。
    • to bottom right: 渐变从左上到右下。
    • to bottom left: 渐变从右上到左下。
    1. 角度值:
    • 角度值允许使用度数(deg)来指定渐变的方向,如 45deg 表示从左下到右上的45度角渐变。角度值范围通常是0deg到360deg,其中0deg等同于to right,90deg等同于to top,180deg等同于to left,270deg等同于to bottom。

image.png

  • color-stop :定义渐变中颜色的切换点及其颜色值。每个color-stop代表渐变中一个颜色的开始或结束位置,以及那个位置上的确切颜色。它有助于控制渐变中颜色过渡的精确位置,使得渐变效果更加细腻和可控。color-stop可以通过两种方式指定:
    • 直接颜色值:直接提供颜色值,CSS引擎会自动分配它们之间的空间。例如,linear-gradient(to right, red, yellow)中,红色到黄色的渐变自动均匀分布。

    • 带有位置的颜色值:除了颜色,还可以指定颜色在渐变线上的位置。位置可以是百分比(如20%)或长度值(如100px),它表示颜色停止点相对于渐变总长度的位置。例如,linear-gradient(to right, red 20%, yellow 80%)指定了红色在20%的位置结束,黄色从那里开始,直到80%的位置。

在实际应用中,可以使用多个color-stop来创建复杂的渐变效果,每个color-stop之间用逗号分隔。例如:

background-image: linear-gradient(to bottom, red, orange 20%, yellow 40%, green 60%, blue 80%, purple);

在这个例子中,渐变从顶部的红色开始,到20%高度时变为橙色,接着在40%高度变为黄色,以此类推,直到底部变为紫色。通过精确控制color-stop的位置,可以实现非常细腻和定制化的渐变效果。

径向渐变(Radial Gradient)

径向渐变使颜色从中心点向外辐射过渡。

基本语法如下:

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);
  • shape 可以是 circle 或 ellipse,定义渐变形状。circle:表示指定渐变为圆形。这意味着渐变的宽度和高度将保持一致,形成一个完美的圆形。ellipse(默认值):表示指定渐变为椭圆形。这是默认值,如果不显式声明形状,渐变将默认为椭圆形。椭圆的宽高比依赖于渐变的尺寸(size)和容器的尺寸。这两个值允许你控制渐变的外观,使其更适合设计需求,无论是希望获得统一的圆形效果,还是适应容器的自然形状的椭圆形效果。

  • size 控制渐变的大小,如 closest-side、farthest-side、长度值等。

  • at position 定义渐变中心点,默认为元素中心,它允许你精确控制渐变圆心或椭圆中心的位置。at position值的语法类似于CSS中的background-position属性,可以是关键字(如 center、top、left、bottom、right),百分比值(如 50% 50%),或者具体的长度单位(如 100px 50px)。这些值共同决定了渐变中心相对于其容器的位置。例如:

    • at center 表示渐变中心位于元素的正中心。
    • at top left 表示渐变中心位于元素的左上角。
    • at 30% 70% 表示渐变中心位于元素宽度的30%处和高度的70%处。
    • at 20px 50px 表示渐变中心距离元素左边20像素,上边50像素的位置。
  • 后面的部分与线性渐变相同,定义颜色的切换点。

例如,一个从中心点向外扩散的圆形红色到透明渐变:

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

实战示例

线性渐变实例

下面将为你提供几个实现CSS线性渐变效果的实例,涵盖不同方向和应用场景:

1. 从上到下的线性渐变

.gradient-top-to-bottom {background: linear-gradient(to bottom, #ff0000, #00ff00);
}

这个例子中,颜色从顶部的红色(#ff0000)渐变到底部的绿色(#00ff00)。

image.png

  1. 从左到右的线性渐变
.gradient-left-to-right {background: linear-gradient(to right, #0000ff, #ffff00);
}

此例中,颜色从左侧的蓝色(#0000ff)渐变到右侧的黄色(#ffff00)。

image.png

  1. 对角线(左上到右下)渐变
.gradient-diagonal {background: linear-gradient(to bottom right, #ff00ff, #00ffff);
}

在此示例中,颜色从左上角的洋红(#ff00ff)渐变到右下角的青色(#00ffff)。

image.png

  1. 多色渐变
.gradient-multi-color {background: linear-gradient(to right, #f00, #ff0 40%, #0f0 60%, #00f);
}

这个例子展示了多色渐变,从红色(#f00)开始,中间经过黄色(#ff0)和绿色(#0f0),最终到蓝色(#00f)。

image.png

  1. 带透明度的渐变(实现颜色淡入淡出效果)
.gradient-transparent { background: linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1)); }

这个例子中,颜色从完全透明的红色渐变到完全不透明的红色,实现了颜色的淡入效果。

image.png

  1. 使用角度指定的渐变
.gradient-angle { background: linear-gradient(135deg, #00bfff, #87cefa); }

这里,渐变方向由角度指定,135度角意味着从左下到右上的对角渐变,颜色从天蓝色(#00bfff)渐变到淡天蓝色(#87cefa)。

image.png

径向渐变实例

下面是一些实现CSS径向渐变效果的实例,展示不同类型的径向渐变应用:

  1. 基础径向渐变
.radial-gradient-basic {background: radial-gradient(circle, #ff0000, #00ff00);
}

这个例子中,颜色从中心的红色(#ff0000)渐变到边缘的绿色(#00ff00),渐变形状为默认的圆形。

image.png

  1. 设置渐变中心点
.radial-gradient-center {background: radial-gradient(at right bottom, #ff00ff, #00ffff);
}

渐变中心点被设定在元素的右下角,颜色从洋红到青色渐变。

image.png

  1. 多色径向渐变
.radial-gradient-multi {background: radial-gradient(circle, #f00, #ff0 30%, #0f0 60%, #00f);
}

展示了从红色到黄色、再到绿色、最后到蓝色的多色径向渐变。

image.png

  1. 重复径向渐变
.radial-gradient-repeat {background-image: repeating-radial-gradient(circle, #f00, #f00 10px, #ff0 10px, #ff0 20px);
}

这里需要注意一下repeating-radial-gradient 表示创建一个重复的径向渐变。与普通的径向渐变不同,当渐变达到边界后,它会重复生成相同的渐变模式,形成一种图案效果。在上面的示例中circle参数指定了渐变的形状为圆形。渐变将以一个完美的圆形从中心点开始并向外扩展。(#f00, #f00 10px, #ff0 10px, #ff0 20px)主要定义渐变颜色、渐变颜色的开始与结束位置。首先,渐变从颜色#f00(红色)开始。接着,到距离中心点10px的位置,红色(#f00)结束。在同一个10px位置,黄色(#ff0)开始。到达20px的位置时,黄色(#ff0)结束,但因为接下来没有指定新的颜色,渐变会从黄色开始重复,再次在10px之后变为红色,如此循环往复。

这样就创建了一个以红色到黄色为循环单元的重复径向渐变背景。

image.png

  1. 控制渐变大小
.radial-gradient-size {background: radial-gradient(closest-side, #00bfff, #87cefa);
}

通过设置closest-side,渐变的大小会根据离它最近的边来决定,颜色从天蓝色渐变到淡天蓝色。

image.png

总结

总的来说,CSS渐变是一个强大的工具,并且也没有想象的那么复杂。虽然方法很简单,但是想要设计出好的视觉效果对个人审美要求极高。为什么这么说呢?因为即使方法是简单,但这里的关键是什么样的颜色变化更符合人类的视觉美感,这活怕是只有UI设计才能胜任。但这也有关系,这里给大家分享一个网站https://www.designgradients.com/上面已经有很非常好看的渐变效果,可以拿来直接就用。>

image.png

喜欢就关注一下吧.gif

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

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

相关文章

Socket编程详解(二)核心代码讲解

本文对代码的讲解基于上一篇博客 快速链接 Socket编程详解(一)服务端与客户端的双向对话 小试牛刀1:委托声明的关键字和委托方法使用的方法名是不一样的名称 可读性:有时,委托的名称可能描述了它的用途或它在哪里被…

使用Swoole开发高性能的Web爬虫

使用swoole开发高性能的web爬虫 Web爬虫是一种自动化获取网络数据的工具,它可以在互联网上收集数据,并且可以被应用于各种不同的领域,如搜索引擎、数据分析、竞争对手分析等。随着互联网规模和数据量的快速增长,如何开发一个高性…

RequestMappingHandlerAdapter【Spring源码学习】

HandlerAdapter处理器适配器就是去调用处理器方法! HandlerAdapter // 解析RequestMapping注解 生成路径和控制器方法得映射关系 RequestMappingHandlerMapping requestMappingHandlerMapping context.getBean(RequestMappingHandlerMapping.class);// 查看生成的…

六、常用API ★ ✔

六、常用API 模块14.基础API第一章.String1.String介绍2.String的实现原理 ★private final char[] value;private final byte[] value; 3.String的创建 ★ (无参、字符串、字符数组、字节数组)4.String 面试题【String s new String("abc")】…

「树莓派入门」树莓派基础06-Linux操作系统和编辑器的使用

本文主要介绍如何在树莓派上使用终端进行基本操作,包括文件的创建、查看、删除和移动,以及如何使用超级用户权限和切换用户。同时,也介绍了如何使用nano和vi编辑器编辑文件。 一、连接树莓派 通过SSH连接 确保树莓派的SSH服务已启动。在终端…

Django —— 用户名和密码配置

创建项目ProjectA: django-admin startproject ProjectA cd进入ProjectA文件夹运行项目: python manage.py runserver 0.0.0.0:8000 Starting development server at http://0.0.0.0:8000/Quit the server with CTRL-BREAK. 访问http://localhost:80…

智慧校园-档案管理系统总体概述

智慧校园档案管理系统,作为教育信息化进程中的重要一环,它运用现代信息技术的力量,彻底改变了传统档案管理的面貌,为学校档案资源的收集、整理、存储、检索与利用开辟了全新的途径。这一系统全面覆盖学生、教职工、教学科研及行政…

驾驭Scala的网络之力:HTTP客户端与服务器实战指南

驾驭Scala的网络之力:HTTP客户端与服务器实战指南 在现代应用开发中,HTTP作为网络通信的基石,其重要性不言而喻。Scala,以其强大的函数式编程特性和类型系统,为构建高效、可靠的HTTP客户端和服务器提供了丰富的工具和…

2.ROS串口安装和调试

首先安装串口依赖 sudo apt-get install ros-melodic-serial 其次安装串口调试助手 sudo apt-get install minicom 再赋予串口权限 sudo chmod 777 /dev/ttyTHS1 打开调试助手 sudo cutecom 硬件引脚图:

【算法专题--栈】栈的压入、弹出序列 -- 高频面试题(图文详解,小白一看就懂!!)

目录 一、前言 二、题目描述 三、解题方法 💧栈模拟法💧-- 双指针 ⭐ 解题思路 ⭐ 案例图解 四、总结与提炼 五、共勉 一、前言 栈的压入、弹出序列 这道题,可以说是--栈专题--,最经典的一道题,也是在…

前端通过ResizeObserver来监听dom大小动态渲染echarts

export const GlobalResizeObserver (function () {const ATTR_NAME global-resizeobserver-keyconst attrValueToCallback {}function antiShake(fn, delay, immediate false) {let timer null//不能用箭头函数return function () {//在时间内重复调用的时候需要清空之前…

Java 实现将List按照字符串(特定规则)排序

日常开发中我们通常会遇到将一个List按照特定的规则排序,例如我们需要将一个List按照 “广州市”, “深圳市”, “珠海市”, “汕头市” 的顺序排序,我们可以使用下述方式实现。 City实体类 import lombok.AllArgsConstructor; import lombok.Data; im…

如何使用飞书快捷指令无感记账,ios版

总结 很多人无法长期坚持记账,主要是每次消费需要打开手机软件,一系列繁琐的操作,导致过程中可能就忘了。 今天给大家带来飞书自动记账。 演示视频 点击查看:https://www.douyin.com/video/7312857946382241063 安装 下载快捷…

hive调优原理详解:案例解析参数配置(第17天)

系列文章目录 一、Hive常问面试函数(掌握) 二、Hive调优如何配置(重点) 文章目录 系列文章目录前言一、Hive函数(掌握)11、JSON数据处理12、炸裂函数13、高频面试题13.1 行转列13.2 列转行 14、开窗函数&a…

Vue2 基础八电商后台管理项目——中

代码下载 商品分类页 新商品分类组件 goods/Cate.vue&#xff0c;在router.js中导入子级路由组件 Cate.vue&#xff0c;并设置路由规则。 绘制商品分类基本结构 在Cate.vue组件中添加面包屑导航以及卡片视图中的添加分类按钮&#xff1a; <template><div><…

AcWing算法基础课笔记——记忆化搜索:滑雪

记忆化搜索 1. 滑雪 题目 题目描述&#xff1a; 给定一个R行C列的矩阵&#xff0c;表示一个矩形网格滑雪场。 矩阵中第 i 行第 j 列的点表示滑雪场的第 i 行第 j 列区域的高度。 一个人从滑雪场中的某个区域内出发&#xff0c;每次可以向上下左右任意一个方向滑动一个单位…

常用word文档格式

1.字体要求 中文&#xff1a;宋体 英文&#xff1a;Times New Roman 2.标题 主标题&#xff1a;二号或小二号&#xff0c;居中&#xff0c;不加粗 副标题&#xff1a;三号&#xff0c;不加粗 三级标题&#xff1a;小三号&#xff0c;不加粗 3.修订记录 excel格式&#xff…

mac Canon打印机连接教程

官网下载安装驱动&#xff1a; 选择打印机类型和mac系统型号下载即可 Mac PS 打印机驱动程序 双击安装 系统偏好设置 点击“”添加&#xff1a; OK可打印玩耍&#xff01;&#xff01; 备注&#xff1a; 若需扫描&#xff0c;下载扫描程序&#xff1a; 备注&#xff1a;…

禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)

目录 1.要解决的问题2.一技能&#xff1a;原生属性&#xff0c;小试牛刀3.二技能&#xff1a;傀儡input&#xff0c;瞒天过海4.三技能&#xff1a;JavaScript出击&#xff0c;直接开大5.九九八十一难&#xff0c;永远还有最后一难 写在前面&#xff1a; 如有转载&#xff0c;务…

JavaScript小记_js的数据类型与判定

一、数据类型&#xff08;8种&#xff09; 基本数据类型&#xff1a;number string Boolean undefined null symbol bigint引用数据类型&#xff1a;object &#xff08;array function &#xff09; 二、区分数据类型 1、typeof 通常用来判断基本数据类型&#xff0c;它返…