CSS实现渐变色

渐变色分为线性渐变和径向渐变。

线性渐变linear-gradient(方向, 颜色1, 颜色2, … ,颜色n)
径向渐变radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小, … )

线性渐变的方向可以为:
​ 1、一个方向值时: to bottom 表示从上边到下边渐变
​ 2、两个方向值时: to right bottom 表示从左上角到右下角渐变

​ 径向渐变的覆盖区域大小为百分比,表示该颜色覆盖的范围
​ 例如: radial-gradient(green 30%, yellow 80%);
​ 表示绿色占了整个区域的30%,黄色占了整个区域的20%,绿色与黄色过渡的部分占了整个区域的50%;

线性渐变

线性渐变使用linear-gradient,语法如下:

background-image: linear-gradient(渐变方向, 颜色1[位置1], 颜色2[位置2], 颜色3[位置3]…);

渐变方向有以下几种值:

to top 表示从下往上的方式进行渐变
to bottom 表示从上往下的方式进行渐变
to right 表示从左往右的方式进行渐变
to left 表示从右往左的方式进行渐变
to top left 表示从右下向左上进行渐变(top和left可以交换位置,下同)
to top right 表示从左下向右上进行渐变
to bottom left 表示从右上向左下进行渐变
to bottom right 表示从左上向右下进行渐变

使用角度表示,例如0deg等同于to top, 90deg等同于to right
使用弧度,单位为rad
使用turn,代表环绕圆圈的圈数,0.5turn表示半圈,也就是180deg
使用grad,表示百分度,400grad表示360deg

径向渐变

径向渐变使用radial-gradient,语法如下:

background-image: radial-gradient(颜色1 覆盖区域大小, 颜色2 覆盖区域大小,);

圆形

.box {
	width: 200px;
	height: 200px;
	background-image: radial-gradient(circle, red, blue);
}

在这里插入图片描述
椭圆形

.box {
	width: 200px;
	height: 200px;
	background-image: radial-gradient(ellipse, red, blue);
}

在这里插入图片描述
重复性径向渐变

.box {
	width: 200px;
	height: 200px;
	border-radius: 50%;
	background-color: red;
	/* 针对不支持渐变的浏览器 */
	background-image: repeating-radial-gradient(red, yellow 10%, green 20%);
}

在这里插入图片描述

边框线性渐变

语法如下:

border-image: linear-gradient(方向,颜色1,颜色2) 内向偏移量;

表示盒子有一个从左上角到右下角进行由黄色到绿色的5px宽的渐变边框,示例如下:

//边框的颜色为什么不重要,会被下面覆盖的
border: 5px solid;
//最后面跟的 5 表示内向偏移量,写成和边框设置的宽度一样即可
border-image: linear-gradient(to bottom right,yellow, green) 5;

在这里插入图片描述

径向渐变

语法如下:

border-image: radial-gradient(颜色1 百分比,颜色2 百分比…) 内向偏移量

表示盒子有一个从中心向到外进行由黄色到绿色的5px宽的渐变边框,示例如下:

//边框的颜色为什么不重要,会被下面覆盖的
border: 5px solid black;
//最后面跟的 5 表示内向偏移量,写成和边框设置的宽度一样即可  
border-image: radial-gradient(yellow 70%, green 130%) 5;

在这里插入图片描述

底部边框线性渐变

从左到右,由透明开始向蓝色渐变

/*首先我们设置边框只显示底部,宽度为5px的实线。*/
border-bottom: 5px solid;
/*设置线性渐变*/
border-image: linear-gradient(90deg, rgba(0, 216, 247, 0) 0%, #00afed 100%) 5 5 5 5;

在这里插入图片描述

右侧边框线性渐变

从上到下,从起始开始,透明向蓝色渐变到20%的位置,然后又向透明进行渐变到99%的位置,99%到结束是透明

/*首先我们设置边框只显示右侧,宽度为5px的实线。*/
border-right: 5px solid;
/*设置线性渐变*/
border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 20%, rgba(255, 255, 255, 0) 99%) 5 5 5 5;

在这里插入图片描述

扩展

一个集合180种免费的线性渐变网站,可在任何网站使用您不仅可以复制渐变的原生CSS颜色代码,还可以查看下载每个优质的渐变图片。网址是http://color.oulu.me
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

GO语言核心30讲 实战与应用 (WaitGroup和Once,context,Pool,Map,字符编码,string包,bytes包)

原站地址:Go语言核心36讲_Golang_Go语言-极客时间 一、sync.WaitGroup和sync.Once 1. sync.WaitGroup 比通道更加适合实现一对多的 goroutine 协作流程。 2. WaitGroup类型有三个指针方法:Wait、Add和Done,以及内部有一个计数器。 (1) Wa…

《控制系统实验与综合设计》自控第二次(含程序和题目)

实验五 二阶系统的瞬态响应 一、实验完成任务 1、测试在不同阻尼比的条件下单位阶跃响应曲线,并进行其他动态性能指标测量。 2、通过调节开环增益得到相应K值,并进行其他动态性能指标测量。 3、在阻尼比一定时,测试角频率不同时的单位阶跃…

Service Worker的生命周期和全局对象和API

Service Worker的生命周期和全局对象和API 当我们注册了Service Worker后,它会经历生命周期的各个阶段,同时会触发相应的事件。整个生命周期包括了:installing --> installed --> activating --> activated --> redundant。当Se…

深度剖析进程概念与进程状态

文章目录 1. 前言2. 什么是进程2.1 进程概念2.2 进程描述——PCB 3. 进程的一些基本操作3.1 查看进程3.2 结束进程3.3 通过系统调用获取进程标示符3.4 通过系统调用创建子进程 4. 进程状态4.1 普适的操作系统层面4.2 具体Linux操作系统层面 5. 两种特殊的进程5.1 僵尸进程5.2 孤…

每日OJ题_贪心算法四⑧_力扣767. 重构字符串

目录 力扣767. 重构字符串 解析代码 力扣767. 重构字符串 767. 重构字符串 难度 中等 给定一个字符串 s ,检查是否能重新排布其中的字母,使得两相邻的字符不同。 返回 s 的任意可能的重新排列。若不可行,返回空字符串 "" 。 …

【Java基础】枚举类的方法及应用

如何实现让一个类有固定个数的对象 手动封装构造方法(private) → 创建静态对象 → final修饰静态对象,使其成为常量 class Season { //枚举类public final static Season SPRING new Season();public final static Season SUMMER new Se…

Redis的集群模式——Java全栈知识(20)

1、主从模式 Redis 支持主从模式的集群搭建,这是 Redis 提供的最简单的集群模式搭建方案,目的是解决单点服务器宕机的问题。当单点服务器发生故障的时候保证 Redis 正常运行。 主从模式主要是将集群中的 Redis 节点分为主节点和从节点。然后读和写发生在…

C++11续——智能指针(出现原因至源码模拟)

前言:在C11里面提出了一个新的语法 try catch用来捕捉异常,这样子能不使用return和exit的前提下退出程序就得到错误信息,但是随之而来的就是一个新的问题,try catch退出程序之后可能带来了无法释放的内存泄露问题,原因…

微信小程序 19:小程序分包

对小程序进行分包的好处主要有以下两点 可以优化小程序首次启动的下载时间在多团队共同开发时可以更好的解偶协作 分包前小程序的项目构成 分包前,小程序项目中所有的页面资源都被打包到一起,导致整个项目体积过大,影响小程序首次启动的下…

vue自定义权限指令

定义v-hasPermi指令 /*** v-hasPermi 操作权限处理*/import useUserStore from /store/modules/userexport default {mounted(el, binding, vnode) {const { value } bindingconst all_permission "*:*:*";const permissions useUserStore().permissions&#xff…

算法-卡尔曼滤波之基本数学的概念

1.均值 定义:均值是一组数据中所有数值的总和除以数据的数量。均值是数据的中心趋势的一种度量,通常用符号 xˉ 表示。 :对于包含 n 个数据的数据集 {𝑥1,𝑥2,...,𝑥𝑛},均值 xˉ 计…

常见 Web 安全攻防总结

Web 安全的对于 Web 从业人员来说是一个非常重要的课题,所以在这里总结一下 Web 相关的安全攻防知识,希望以后不要再踩雷,也希望对看到这篇文章的同学有所帮助。今天这边文章主要的内容就是分析几种常见的攻击的类型以及防御的方法。 也许你对…

利用CAD绘制角度斜线的简易指南---模大狮模型网

在CAD设计中,绘制角度斜线是常见的需求,尤其在工程、建筑等领域中。正确绘制角度斜线不仅可以提高图纸的清晰度和美观度,还有助于准确表达设计意图。本文将介绍如何利用CAD软件进行角度斜线的绘制,为您提供简明易懂的操作指南。 一…

什么是资源池技术?它有什么用?

在开发应用程序过程中,涉及到对系统资源进行有效管理时往往会用到池化操作。资源池模式的应用场景很多,可以管理那些想要通过重用来分摊昂贵初始化代价的对象,而管理数据库连接就是很好的一种应用场景。数据库连接池作为一种典型的池化技术手…

云端的艺术革命:云渲染如何重塑动画与视觉特效产业

在 2019 年,乔恩费儒(Jon Favreau)决定重拍迪士尼的经典电影《狮子王》。他的创新构想是以真实动物为模型,在非洲草原上拍摄,由真实动物“出演”的辛巴和其他角色,随后通过配音赋予它们生命。 为了实现这一…

vue前端时间段选择控件

实现效果: 可选具体的某天的某时某分某秒 vue前端代码: <el-form-item label"日期"><el-date-pickerv-model"daterangerq"style"width: 240px"value-format"yyyy-MM-dd HH:mm:ss"type"datetimerange"range-separat…

[笔记] srlua库编译

文章目录 前言一、环境二、编译过程2.1 gcc安装2.2 编译lua2.3 编译srlua库 三、测试srlua库参考总结 前言 一、环境 centos7.9 gcc version 4.8.5 20150623 (Red Hat 4.8.5-44) (GCC) lua5.1源码 srlua 源码 二、编译过程 2.1 gcc安装 yum install gcc这里gcc安装过程和环…

基础学习-Git(分布式版本控制系统)

学习视频推荐 http://【黑马程序员Git全套教程&#xff0c;完整的git项目管理工具教程&#xff0c;一套精通git】 https://www.bilibili.com/video/BV1MU4y1Y7h5/?p5&share_sourcecopy_web&vd_source2b85bd9be9213709642d908906c3d863 1、Git环境配置 安装Git Git下…

CAXA 3D实体设计2024:塑造未来的创新引擎

在数字化时代的浪潮中&#xff0c;3D CAD实体建模设计正成为推动工业创新的核心动力。CAXA 3D实体设计2024&#xff0c;以其卓越的性能和丰富的功能&#xff0c;为企业和个人用户带来了前所未有的设计体验。 CAXA 3D实体设计2024不仅拥有直观易用的界面&#xff0c;还配备了强…

【JS】call和 apply函数的详解

JavaScript 中 call() 和 apply() 函数的详解 在JavaScript中&#xff0c;call()和apply()都是非常重要的方法&#xff0c;用于调用函数时指定函数体内的this的值&#xff0c;从而实现不同对象之间的方法共享。尽管它们的功能非常相似&#xff0c;但在实际使用中各有其优势和特…