【css】渐变效果

css渐变效果

使用 CSS 渐变可以在两种颜色间制造出平滑的渐变效果。

用它代替图片,可以加快页面的载入时间、减小带宽占用。同时,因为渐变是由浏览器直接生成的,它在页面缩放时的效果比图片更好,因此你可以更加灵活、便捷的调整页面布型

类型含义
线性渐变linear-gradient指在一条直线上进行渐变
径向渐变radial-gradient是一种从起点到终点颜色从内到外进行圆形渐变(从中间向外拉,像圆一样)

一、线性渐变

创建一个线性渐变,至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。

语法

background: linear-gradient(direction, color1, color2, ...);

1、线性渐变 - 从上到下(to bottom)(默认情况下)/从下到上(to top)

background: linear-gradient(#e66465, #9198e5);//从上到下

background: linear-gradient(to top, #e66465, #9198e5);//从下到上

2、线性渐变 - 从左到右(to right)/从右到左(to left)

background: linear-gradient(to right, pink, skyblue);

background: linear-gradient(to left, pink, skyblue);

效果图

3、线性渐变 - 对角

background: linear-gradient(to top right, rgb(238, 163, 175), rgb(149, 214, 240));

4、线性渐变 - 使用角度

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)

语法

background: linear-gradient(angle, color1, color2,...);

html代码块

<div class="box box1">0deg</div>
<div class="box box2">90deg</div>
<div class="box box3">180deg</div>
<div class="box box4">-90deg</div>
<div class="box box5">45deg</div>
<div class="box box6">-45deg</div>

css代码块

<style>* {margin: 0;padding: 0;}.box {width: 150px;height: 150px;margin: 100px auto;margin-left: 10px;float: left;}.box1 {background: linear-gradient(0deg, pink, skyblue);}.box2 {background: linear-gradient(90deg, pink, skyblue);}.box3 {background: linear-gradient(180deg, pink, skyblue);}.box4 {background: linear-gradient(-90deg, pink, skyblue);}.box5 {background: linear-gradient(45deg, pink, skyblue);}.box6 {background: linear-gradient(-45deg, pink, skyblue);}
</style>

效果图

5、重复的线性渐变

将线性渐变平铺显示

语法

background: repeating-linear-gradient(direction, color1, color2,...);

html代码块

<div class="box box1">默认</div>
<div class="box box2">45deg</div>
<div class="box box3">从左到右</div>
<div class="box box4">190deg</div>

css代码块

<style>* {margin: 0;padding: 0;}.box {width: 150px;height: 150px;margin: 100px auto;margin-left: 10px;float: left;}.box1 {background: repeating-linear-gradient(red, yellow 10%, green 20%);}.box2 {background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);}.box3 {background: repeating-linear-gradient(to right, red, yellow 10%, green 20%);}.box4 {background: repeating-linear-gradient(190deg, red, yellow 10%, green 20%);}
</style>

效果图

补充:不均匀渐变百分比

百分比表示指定颜色的标准中心线位置,百分比之间是过渡色,如果百分比位置之间有重叠会失去渐变过渡色。

background: linear-gradient(red 10%, green 85%, blue 90%)

其中:

10% 表示 red 的颜色中心线在线性渐变方向的 10% 的位置。

85% 表示 green 的颜色中心线在线性渐变方向的 85% 的位置。

90% 表示 blue 的颜色中心线在线性渐变方向的 90% 的位置。

10% 到 85% 是 red-green 的过渡色,85%-90% 是 green-blue 的过渡色。

二、径向渐变

创建一个径向渐变,也必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。

同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

参数含义默认值
shape定义形状(圆形或者椭圆)ellipse(表示椭圆形)注意:容器宽高不相等
size定义大小farthest-corner(表示到最远的角落)
position定义圆心的位置center(表示在中心点)
start-color定义开始的颜色值必填,无默认值
last-color定义结束的颜色值必填,无默认值
1、普通径向渐变

颜色节点均匀分布

<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 150px;margin: 100px auto;background: radial-gradient(red, yellow, orange)}</style>

颜色节点不均匀分布

background: radial-gradient(red 5%, yellow 15%, orange 60%)

2、自定义圆心位置

background: radial-gradient(at right top, red, yellow, orange)
/*使用 at 来定义最终的圆心位置 at后面可以接代表方向的关键字 也可以使用百分值
默认是先设置水平方向的位置 然后是垂直方向 这里就表示将圆心的位置定义在右上角 
*/

3、自定义形状、自定义圆心位置

background: radial-gradient(circle at 50% 50%, red, yellow, orange)
/*这里表示的就是创建一个圆形 且该圆形的圆心位于水平方向50% 垂直方向50%的位置
*/

4、自定义径向大小

background: radial-gradient(100px 50px at 50% 50%, red, yellow, orange)
/*这里表示定义了一个水平半径为150px 垂直半径为110px 圆心的位置在水平方向50% 垂直方向50% 即居中显示*/

注意:自定义径向大小时,不能自定义形状。

自定义大小,是改变水平和垂直两个方向的半径,只有当形状是椭圆时,才能同时自定义水平和垂直方向的半径,当形状是圆时,只能调整一个方向的半径!!!

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

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

相关文章

postgresql16 物理复制与逻辑复制的实现和对比

本文面向想要练习 PostgreSQL 中数据库复制基础知识但可能无法访问远程服务器的初学者。我认为学习新技术时&#xff0c;在自己的机器上运行示例以巩固概念是至关重要的。对于副本来说&#xff0c;这可能很困难&#xff0c;因为许多可用的资源假设用户具有一定的 PostgreSQL 经…

find_shape_model

*形状匹配 find_shape_model (ImageEmphasize, ModelID, -0.39, 0.78, 0.5, 1, 0.5, least_squares, [4,-2], 0.9, Row, Column, Angle, Score) *创建一个初始化矩阵 hom_mat2d_identity (HomMat2D) *从点和角度计算刚性仿射变换&#xff0c;找出模板和卡尺工具…

网页屏幕适配通透了

一&#xff0c;如果设计尺寸固定 那就按照固定尺寸开发 一般都是1920*1080 二&#xff0c;需要适配多种像素屏幕&#xff08;大屏可视化&#xff09; 可使用媒体查询设置多套css样式或者使用自适应单位&#xff0c;%&#xff0c;vw&#xff0c;vh 最好解决方案rem&#xff…

JavaScript 之 位运算

一、简介 ​ JavaScript的位运算符是将进行运算的数字&#xff08;八进制、十进制、十六进制等&#xff09;转换为32位的二进制串&#xff0c;超过 32 位的数字会丢弃其最高有效位&#xff0c;只保留后32位二进制串。然后再对每一位进行运算。但运算后得出的结果&#xff0c;会…

Python 元类 metaclass 详解

元类&#xff08;metaclass&#xff09;是 Python 中一个高级且相对较少使用的概念。元类可以被视为类的类&#xff0c;它控制类的创建过程。 一、基本概念 在 Python 中&#xff0c;一切皆对象。为了避免混淆&#xff0c;我们约定两个术语&#xff1a; 类实例&#xff1a;当…

IPv6路由综合运用

一、基础配置: SWA: sw1(config)#host swA swA(config)#ipv6 ena swA(config)# vlan 100 swA(config-vlan100)#int vlan 100 swA(config-if-vlan100)#ipv6 ena swA(config-vlan100)#ip add 172.16.1.1 255.255.255.252 swA(config-if-vlan100)#int e1/0/24 swA(conf…

教育科学杂志教育科学杂志社教育科学编辑部2023年第12期部分目录

“思政教育联合思维导图”教学模式在肝病感染控制护理临床教学中的应用 黄雪霞;陈海涵;蒋雅文 中职语文教学中厚植爱国主义情怀的要点分析 苏琴 职业素养视角下中职计算机专业课程教学改革实践 李石 产教融合背景下高职院校产业学院建设模式的实践探索 郭洋 《工程制图与CAD》课…

数据结构学习 jz31 栈的压入、弹出序列

关键词&#xff1a;模拟 栈 不太熟&#xff0c;调了好一阵子。 题目&#xff1a;https://leetcode.cn/problems/zhan-de-ya-ru-dan-chu-xu-lie-lcof/ 思路&#xff1a; 主要是利用一个辅助栈&#xff0c;来模拟这个过程&#xff0c;如果过程不行就返回失败。 int sig 0;如…

Java研学-分页查询

一 分页概述 1 介绍 将大量数据分段显示&#xff0c;避免一次性加载造成的内存溢出风险 2 真假分页 ① 真分页   一次性查询出所有数据存到内存&#xff0c;翻页从内存中获取数据&#xff0c;性能高但易造成内存溢出 ② 假分页   每次翻页从数据库中查询数据&#xff0c…

解决计算机中vcruntime140.dll错误!六种方法教你修复

什么是vcruntime140.dll文件呢&#xff1f;为什么会出现丢失的情况&#xff1f;如何解决这个问题呢&#xff1f;本文将为您详细介绍vcruntime140.dll文件的作用、丢失原因以及6个快速解决方法。 一、vcruntime140.dll是什么文件&#xff1f; vcruntime140.dll是Visual C Redi…

聚合收益协议 InsFi :打开铭文赛道全新叙事的旋转门

​“InsFi 协议构建了一套以铭文资产为基础的聚合收益体系&#xff0c;该体系正在为铭文资产捕获流动性、释放价值提供基础&#xff0c;该生态也正在成为铭文赛道掘金的新热土。” 在 2023 年年初&#xff0c;Ordinals 协议在比特币链上被推出后&#xff0c;为比特币链上带来了…

STC51+TLC2543+ADXL335+proteus

51单片机解析adxl335振动检测蜂鸣器报警课设 通过按键调整振动检测阈值 传感器介绍 TLC2543&#xff1a;12 位精密模数转换器&#xff0c;原理图与引脚功能描述如下所示&#xff1a; 引脚功能1~9、11、12模拟量输入通道10GND电源地13REF-为负基准电压端14REF为正基准电压端…

基于ssm的课程在线教学平台设计与实现论文

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统Java课程教学信息管理难度大&#xff0c;容错率低&#x…

Referring Expression Comprehension(REC)任务介绍以及相关数据集

Referring Expression Comprehension&#xff08;REC&#xff09;&#xff0c;即指称表达理解&#xff0c;任务是根据文本描述框出文本中提到的一个特定目标相关数据集&#xff1a; 是三个从 MSCOCO 中选取图像得到的数据集&#xff0c;数据集中对所有的 phrase 都有 bbox 的标…

【html】Video元素的属性介绍和用法

简言 HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器&#xff0c;用于支持文档内的视频播放。 平常若涉及到视频内容&#xff0c;就会使用到它。 video Video使用 只有一个视频源 只有一个视频的话&#xff0c;在\video元素中的src属性填入即可。 …

【工作周志】240108-240114

Q&#xff1a;set_property bitstream.config.timer_cfg 这样的配置用于哪里&#xff1f; A&#xff1a;https://www.cnblogs.com/lazypigwhy/p/10450406.html FPGA通过CPU远程升级方案_bitstream.config.timer_cfg-CSDN博客 Q&#xff1a;逛论坛有人问&#xff0c;reg也可以…

数据资产入表背后:中国To B数字化驶入“数据时代”

数据资产“入表”&#xff0c;更像是一剂通过颠覆旧的生产关系&#xff0c;从根上医治数字化转型的“良方”。 那么&#xff0c;数据资产到底是什么&#xff1f;以及在愈发被规范的数据市场大背景下&#xff0c;对中国的To B企业和To B服务商而言&#xff0c;正在或者即将发生…

快速解密Word密码工具,轻松获取文档权限

Word文档怎么解密、找回密码、去除密码&#xff1f;这是最简单的办法&#xff01; 文章&#xff1a;具体步骤如下&#xff1a;1.百度搜索【 密码帝官网 】&#xff0c;2.点击“立即开始”在用户中心上传需要解密的文件稍等片刻就能找找回密码。方法非常安全&#xff0c;不用下载…

RKE安装k8s及部署高可用rancher之证书通过cert-manager

1.安装rke和local集群 [rootnginx 2.5.8]# rke -v rke version v1.5.1 [rootnginx cert-manager]# rke up --config locale-cluster.ym [rootnginx 2.5.8]# cat locale-cluster.yml nodes:- address: 192.168.1.65internal_address: 192.168.1.65hostname_override: 192.168.…