CSS中背景设置——渐变色和放射渐变

渐变:通过渐变可以设置一些复杂的背景颜色,可以从实现一个颜色向其他颜色过渡的效果

渐变是图片,通过 background-image设置

一、渐变色

 可选值

         1: linear-gradient ['ɡreidiənt],线性渐变,颜色沿着一条直线发生变化

               语法:linear-gradient(方位,颜色1,颜色2)

                  参数1:表示方位,(可选值,不写默认是to bottom)

                       (1)to left,to right, to bottom, to top

                       (2)xxxdeg 表示角度,度数,会更灵活

                        (3)turn 表示圈 .5turn

                           参数2:颜色1

                           参数3:颜色2

       注意:可以写多个颜色,默认情况下,颜色是均分占比的,也可以手动的指定渐变的分布情况,例如:background-image:linear-gradient(red 50px,yellow) ,颜色后直接跟占比

     2:repeating-linear-gradient()   可以平铺的线性渐变

       background-image: repeating-linear-gradient(yellow 0px, red 50px);

          参数跟linear-gradient是一样的

         参数2-参数1,中间部分是渐变的颜色,拿总高度/差值,就是颜色重复出现的次数

二、放射渐变 —经向渐变(放射性的效果)

 radial-gradient() ['reidiəl] ['ɡreidiənt]

语法:background-image: radial-gradient();

        默认情况下,圆心是根据元素的形状来计算的

                正方形-->圆形

                长方形-->椭圆型

        参数1:圆心的形状

        (1)circle圆形,ellipse椭圆,

        (2)设置的大小 at 位置==>像素1 像素2 at 0px 0px

        参数2:颜色1

        参数3:颜色2

                ······
 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.box1 {width: 200px;height: 200px;/* background-image:linear-gradient( red,yellow) ; */background-image: repeating-linear-gradient(yellow 0px, red 100px);background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);}</style></head><body><div class="box1"></div></body>
</html>

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

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

相关文章

一年中的第几天

一年中的第几天 提示 给你一个字符串 date &#xff0c;按 YYYY-MM-DD 格式表示一个 现行公元纪年法 日期。返回该日期是当年的第几天。 第一版&#xff1a; int dayOfYear(char* date) {int i0;int year0,month0,day0;while(date[i]!-){year*10;yeardate[i]-0;i;}i;year(yea…

Python编程新技能:如何优雅地实现水仙花数?

水仙花数&#xff08;Narcissistic number&#xff09;也被称为阿姆斯特朗数&#xff08;Armstrong number&#xff09;或自恋数等&#xff0c;它是一个非负整数&#xff0c;其特性是该数的每个位上的数字的n次幂之和等于它本身&#xff0c;其中n是该数的位数。简单来说&#x…

00-开篇导读:学习分库分表开源框架的正确方法

1 前言 互联网高速发展带来海量的信息化数据&#xff0c;也带来更多的技术挑战。各种智能终端设备&#xff08;比如摄像头或车载设备等&#xff09;以每天千万级的数据量上报业务数据&#xff0c;电商、社交等互联网行业更不必说。这样量级的数据处理&#xff0c;已经远不是传…

SELinux 安全模型——MLS

首发公号&#xff1a;Rand_cs BLP 模型&#xff1a;于1973年被提出&#xff0c;是一种模拟军事安全策略的计算机访问控制模型&#xff0c;它是最早也是最常用的一种多级访问控制模型&#xff0c;主要用于保证系统信息的机密性&#xff0c;是第一个严格形式化的安全模型 暂时无…

机器学习三要素与拟合问题

1.如何构建机器学习模型&#xff1f; 机器学习工作流程总结 1.获取数据 2.数据基本处理 3.特征工程 4.机器学习(模型训练) 5.模型评估 结果达到要求&#xff0c;上线服务&#xff0c;没有达到要求&#xff0c;重新上面步骤 我们使用机器学习监督学习分类预测模型的工作流…

Qt5 安装教程 - 跳过登录界面

Qt5 安装教程 - 跳过登录界面 引言一、下载二、安装三、使用四、修改、维护、卸载 引言 Qt5.14.2及以前的版本有离线安装包&#xff0c;无需登录 (老版本连登录界面也无)。之后的版本需登录进行在线安装。 本文以Qt5.12.2版本为例&#xff0c;说明如何跳过登录界面&#xff0c…

Android Context在四大组件及Application中的表现

文章目录 Android Context在四大组件及Application中的表现Context是什么Context源码Activity流程分析Service流程分析BroadcastReceiver流程分析ContentProvider流程分析Application流程分析 Android Context在四大组件及Application中的表现 Context是什么 Context可以理解…

(JAVA)-(网络编程)-TCP协议

客户端(发送端) 1.创建客户端的Socket对象: 参数需要传递要服务端(接收端)的IP和端口&#xff0c;会去链接服务端&#xff0c;服务端连接不上代码会报错 Socket socket new Socket("127.0.0.1",10000); 2.从Socket对象中获取输出流&#xff0c;写出数据 OutputStream…

Java技术栈 —— Redis的雪崩、穿透与击穿

Java技术栈 —— Redis的雪崩、穿透与击穿 〇、实验的先导条件&#xff08;NginxJmeter&#xff09;一、Redis缓存雪崩、缓存穿透、缓存击穿1.1 雪崩1.2 穿透1.3 击穿 二、Redis应用场景——高并发2.1 单机部署的高并发问题与解决&#xff08;JVM级别锁&#xff09;2.2 集群部署…

Redis7.2.3(Windows版本)

1、解压 &#xfeff; &#xfeff; 2、设置密码 &#xff08;1&#xff09; 右击编辑redis.conf文件&#xff1a; &#xfeff; &#xff08;2&#xff09; 设置密码。 &#xfeff; 3、测试密码是否添加成功 &#xfeff; 如上图所示&#xff0c;即为成功。 4、设置…

Android registerForActivityResult

startActivityForResult 已经被标记为不推荐的方法&#xff0c;推荐的替代方案是使用 registerForActivityResult&#xff1a; // Activity 的 onCreate 方法中调用 registerForActivityResult val activityResultLauncher registerForActivityResult(ActivityResultContract…

spring创建与使用

spring创建与使用 创建 Spring 项⽬创建⼀个 Maven 项⽬添加 Spring 框架⽀持添加启动类 存储 Bean 对象创建 Bean将 Bean 注册到容器 获取并使⽤ Bean 对象创建 Spring 上下⽂获取指定的 Bean 对象获取bean对象的方法 使⽤ Bean 总结 创建 Spring 项⽬ 接下来使⽤ Maven ⽅式…

010、切片

除了引用&#xff0c;Rust还有另外一种不持有所有权的数据类型&#xff1a;切片&#xff08;slice&#xff09;。切片允许我们引用集合中某一段连续的元素序列&#xff0c;而不是整个集合。 考虑这样一个小问题&#xff1a;编写一个搜索函数&#xff0c;它接收字符串作为参数&a…

uniapp在Windows系统上打包IOS

获取UDID 使用苹果手机自带Safari浏览器可获取UDID &#xff1a;https://www.pgyer.com/udid 苹果开发者官网:https://developer.apple.com/ 生成开发证书 安装OpenSSL并配置环境变量&#xff1a;http://slproweb.com/products/Win32OpenSSL.html 管理员打开命令行 where …

12.29最小生成数K算法复习(注意输入输出格式),校园最短路径(通过PRE实现路径输出,以及输入输出格式注意)

7-2 最小生成树-kruskal算法 分数 15 const int maxn 1000; struct edge {int u, v, w; }e[maxn]; int n, m, f[30]; bool cmp(edge a, edge b) {return a.w < b.w; } int find(int x) {if (f[x] x) {return x;}else {f[x] find(f[x]);return f[x];} } //int arr[100…

vue脚手架安装

1、安装&#xff1a; npm i vue/cli -g(-g全局安装,全名global) vue --version 查看版本号 2、使用 vue create 项目名称 3、安装选择项 最后一个选N

【Redis-03】Redis数据结构与对象原理 -下篇

承接上篇【Redis-02】Redis数据结构与对象原理 -上篇 8. type-字符串string 8.1 字符串的三种encoding编码&#xff08;int embstr raw&#xff09; 如果保存的是整型&#xff0c;并且可以用long类型标识&#xff08;-9223372036854775808到9223372036854775807&#xff09…

【热学】欧阳欣院士北京大学

笔记正在逐渐完善Ing~博主主页还有其他上万字精品笔记欢迎自取 ​编辑P1第1讲 绪论 33:01 关于热学的基本概念和原理的讲解。热学是一门基础科学&#xff0c;它涉及到热运动和热力学的规律。热运动是指物体内部粒子的无序运动&#xff0c;热力学是研究热运动的宏观规律。视频介…

IO进程线程 day1 IO基础+标准IO

1、使用fgets统计一个文件的行号 #include <stdio.h> #include<string.h> #include<stdlib.h> int main(int argc, const char *argv[]) {FILE *fpNULL;if((fpfopen("1.c","r"))NULL){return -1;}int count0;char buf;while(buf!EOF){b…

C++多态性——(1)初识多态

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 苦难和幸福一样&#xff0c;都是生命盛…