css渐变详解(重复性线性渐变、径向渐变、重复性径向渐变的使用)

目录

线性渐变

重复性线性渐变

径向渐变

重复性径向渐变的使用


线性渐变

  • 线性渐变是向下、向上、向左、向右、对角方向的颜色渐变。
    其语法格式为:
background-image: linear-gradient(side-or-corner|angle, linear-color-stop);

参数说明如下:

  • side-or-corner 是描述渐变线的起始位置,它包含两个关键词:第一个指出水平位置 left or
    right,第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • linear-color-stop 是设置渐变的颜色值。
<style>#linear {display: flex;}/*从上到下线性渐变*/.gradient1 {width: 100px;height: 100px;background-image: linear-gradient(#ff577f, #c6c9ff);}/*从左到右线性渐变*/.gradient2 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(to right, #ff9d72, #c6c9ff);}/*从左上角到右下角的渐变*/.gradient3 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(to bottom right, #8ad7c1, #c6c9ff);}/*定义角度的渐变*/.gradient4 {margin-left: 10px;width: 100px;height: 100px;background-image: linear-gradient(50deg, #bc6ff1, #ffd5cd);}
</style><div id="linear"><div class="gradient1"></div><div class="gradient2"></div><div class="gradient3"></div><div class="gradient4"></div>
</div>

重复性线性渐变

  • 重复性线性渐变是用重复的线性渐变组成的 ,它与线性渐变的区别在于,它会在所有方向上重复渐变来覆盖整个元素。 其语法格式为:
background-image: repeating-linear-gradient(side-or-corner|angle, color-stop);

参数说明如下:

  • side-or-corner 是描述渐变线的起始位置,它包含 to 和两个关键词:第一个指出水平位置 left or right,第二个指出垂直位置 top or bottom。
  • angle 是用角度值来指定渐变的方向。
  • color-stop 是由一个 组成,并且跟随一个可选的终点位置。
<style>div {width: 200px;height: 200px;display: inline-block;margin-left: 20px;margin-top: 20px;}.item1 {background-image: repeating-linear-gradient(45deg,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}.item2 {background-image: repeating-linear-gradient(to left top,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}
</style><div class="item1"></div>
<div class="item2"></div>

径向渐变

  • 径向渐变是由元素中间定义的渐变。 其语法格式为:
background-image: radial-gradient(shape, color-stop);

参数说明如下:

  • shape 设置渐变的形状,其取值有 circle(圆形) 和 ellipse(椭圆)。
  • color-stop 设置某个确定位置的颜色值。
<style>body {padding: 50px;background: #000;}#radial {display: flex;}/*均匀分布径向渐变*/.gradient1 {width: 150px;height: 150px;background-image: radial-gradient(#ff577f, #c6c9ff, #8ad7c1);}/*不均匀渐变*/.gradient2 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(#8bcdcd 5%, #ff9d72, #c6c9ff);}/*椭圆形渐变*/.gradient3 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(ellipse, #8ad7c1, #c6c9ff, #fce2ce);}/*圆形渐变*/.gradient4 {margin-left: 10px;width: 150px;height: 150px;background-image: radial-gradient(circle, #bc6ff1, #ffd5cd, #b6eb7a);}
</style><div id="radial"><div class="gradient1"></div><div class="gradient2"></div><div class="gradient3"></div><div class="gradient4"></div>
</div>

重复性径向渐变的使用

  • 重复性径向渐变是用重复性的径向渐变组成的图像。它与径向渐变的区别在于,它会从原点开始重复径向渐变来覆盖整个元素。其语法格式为:
background: repeating-radial-gradient(extent-keyword, color-stop);

参数说明如下:

  • extent-keyword 是描述边缘轮廓的具体位置,关键字常量如下所示:
  • color-stop 是某个确定位置的固定颜色值。
KeywordDescription
closest-side渐变的边缘形状与容器距离渐变中心最近的一边相切(圆形)或者至少与距离渐变中心最近的垂直和水平边相切(椭圆)
closest-corner渐变的边缘形状与容器距离渐变中心点最近的一个角相交
farthest-side与closest-side相反,边缘形状与容器距离渐变中心点最远的一边相切(或最远的垂直和水平边)
farthest-corner渐变的边缘形状与容器距离渐变中心最远的一个角相交
<style>div {width: 200px;height: 200px;display: inline-block;margin-left: 20px;margin-top: 20px;}.gradient1 {background: repeating-radial-gradient(closest-corner,#8843f8 0%,#ef2f88 5%,#f47340 10%,#f9d371 15%);}.gradient2 {background: repeating-radial-gradient(farthest-side,#8843f8,#ef2f88,#f47340,#f9d371);}
</style><div class="gradient1"></div>
<div class="gradient2"></div>

 

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

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

相关文章

Linux 安装显卡驱动

Linux 安装显卡驱动

scrapy框架流程

1、Scrapy从Spider子类中提取start_url,然后构造为request请求对象 2、将request请求对象传递给爬虫中间件 3、将request请求对象传递给Scrapy引擎&#xff08;核心代码&#xff09; 4、将request请求对象传递给调度器&#xff08;它负责对多个request安排&#xff0c;好比交…

Python计算DICOM图像两点真实距离

Python计算DICOM图像两点真实距离 对比测量结果图Code对比测量结果图 DICOM阅读器(小赛看看)测量结果 python测量结果 Code import numpy as np import cv2 import math import pydicom from pydicom.pixel_data_handlers.util import convert_color_spaceds = pydicom.dc…

高通Camera HAL3: CamX、Chi-CDK要点

目录 一、概述 二、目录 三、CamX组件之前的关系 一、概述 高通CamX架构是高通实现的相机HAL3架构&#xff0c;被各OEM厂商广泛采用。 二、目录 代码位于vendor/qcom/proprietary下&#xff1a; camx&#xff1a;通用功能性接口的代码实现集合chi-cdk&#xff1a;可定制化…

如何正确接入API接口通过淘宝商品ID和sku ID获取到淘宝商品SKU信息接口,可获取sku价格,sku销量,sku图片及sku库存参数等

接入API接口的正确方式可能因API的具体要求而有所不同&#xff0c;但一般来说&#xff0c;以下是一些通用的步骤&#xff1a; 获取API文档&#xff1a;API文档通常包括API的请求方式、请求参数、响应格式等信息。您需要仔细阅读文档&#xff0c;了解API的具体要求和使用方式。…

MDK AC5和AC6是什么?在KEIL5中添加和选择ARMCC版本

前言 看视频有UP主提到“AC5”“AC6”这样的词&#xff0c;一开始有些不理解&#xff0c;原来他说的是ARMCC版本。 keil自带的是ARMCC5&#xff0c;由于ARMCC5已经停止维护了&#xff0c;很多开发者会选择ARMCC6。 在维护公司“成年往事”项目可能就会遇到新KEIL旧版本编译器…

玻色量子“揭秘”之可满足性问题(SAT)与QUBO建模

​ 摘要&#xff1a;布尔可满足性问题&#xff08;Boolean Satisfiability Problem&#xff0c;简称SAT问题&#xff09;是逻辑学和计算机科学中的一个问题&#xff0c;它的目的是确定是否存在一种解释&#xff0c;使给定的布尔公式成立。换句话说&#xff0c;它询问给定布尔公…

前端 计算机基础篇 ( 二 )

文章目录 websockt及原理ipv4和ipv6的区别线程和进程的区别cdn原理缓存所涉及的http状态码缓存的时候设置 no-store和no-cache和max-age0这几个有什么区别token一般存放在哪儿怎么设置强缓存和协商缓存强缓存&#xff1a;1. 使用 Cache-Control 头字段&#xff1a; 协商缓存&am…

工作中死循环害死人

背景&#xff1a;研发的一段代码&#xff0c;循环一直没有跳出&#xff0c;导致其他依赖逻辑有问题&#xff0c;生产事故导致9万左右数据不正常。 这里while&#xff08;true&#xff09;真的不要轻易用 &#xff0c;后来研发改动限制mysql的id切分步长&#xff0c;控制不会有数…

【RtpRtcp】1: webrtc m79:audio的ChannelReceive 创建并使用

m79中,RtpRtcp::Create 的调用很少 不知道谁负责创建ChannelReceiveclass ChannelReceive : public ChannelReceiveInterface,public MediaTransportAudioSinkInterface {接收编码后的音频帧:接收rtcp包:

深入了解前馈网络、CNN、RNN 和 Hugging Face 的 Transformer 技术!

一、说明 本篇在此对自然语言模型做一个简短总结&#xff0c;从CNN\RNN\变形金刚&#xff0c;和抱脸的变形金刚库说起。 二、基本前馈神经网络&#xff1a; 让我们分解一个基本的前馈神经网络&#xff0c;也称为多层感知器&#xff08;MLP&#xff09;。此代码示例将&#xff1…

Web应用系统的小安全漏洞及相应的攻击方式

1 写作目的 本文讲述一个简单的利用WebAPI来进行一次基本没有破坏力的“黑客”行为。 主要目的如下&#xff1a; 了解什么叫安全漏洞知道什么是api了解一些获取api的工具通过对API的认识了解白盒接口测试基本概念和技术 免责声明&#xff1a; 本文主要是以学习交流为目的…

盘点63个Python登录第三方源码Python爱好者不容错过

盘点63个Python登录第三方源码Python爱好者不容错过 学习知识费力气&#xff0c;收集整理更不易。 知识付费甚欢喜&#xff0c;为咱码农谋福利。 链接&#xff1a;https://pan.baidu.com/s/1l7oooH9YovHmWzQ_58FRdg?pwd8888 提取码&#xff1a;8888 项目名称 A headless…

11-23 SSM4

Ajax 同步请求 &#xff1a;全局刷新的方式 -> synchronous请求 客户端发一个请求&#xff0c;服务器响应之后你客户端才能继续后续操作&#xff0c;请求二响应完之后才能发送后续的请求&#xff0c;依次类推 有点&#xff1a;服务器负载较小&#xff0c;但是由于服务器相应…

Vue3+Ts实现聊天机器人(chatBot-附代码)

一&#xff1a;项目介绍 本次实验主要涉及到的技术是 Vue3 Ts&#xff0c;当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足&#xff0c;可能只是做出来了一个半成品。不过核心功能是有的。由…

浅谈安科瑞智能照明系统在马来西亚国家石油公司项目的应用

摘要&#xff1a;随着社会经济的发展及网络技术、通信技术的提高&#xff0c;人们对照明设计提出了新的要求&#xff0c;它不仅要控制照明光源的发光时间、 亮度&#xff0c;而且与其它系统来配合不同的应用场合做出相应的灯光场景。本文介绍了马亚西亚石油公司智能照明项目的应…

tp8 使用rabbitMQ(2)工作队列

代码的参数说明在 第一小节的代码中&#xff0c;如果需要可移步到第一节中查看 工作队列 工作队列&#xff08;又称&#xff1a;任务队列——Task Queues&#xff09;是为了避免等待一些占用大量资源、时间的操作。当我们把任务&#xff08;Task&#xff09;当作消息发送到队列…

推荐一款png图片打包plist工具pngPackerGUI_V2.0

png图片打包plist工具&#xff0c;手把手教你使用pngPackerGUI_V2.0 此软件是在pngpacker_V1.1软件基础之后&#xff0c;开发的界面化操作软件&#xff0c;方便不太懂命令行的小白快捷上手使用。1.下载并解压缩软件&#xff0c;得到如下目录&#xff0c;双击打开 pngPackerGUI.…

使用paddleocr进行OCR文字识别

1 OCR介绍 OCR&#xff08;Optical Character Recognition&#xff09;即光学字符识别&#xff0c;是一种将不同类型的文档&#xff08;如扫描的纸质文件、PDF文件或图像文件中的文本&#xff09;转换成可编辑和可搜索的数据的技术。OCR技术能够识别和转换印刷或手写文字&…

Python接口自动化测试——如何搭建测试环境

前言 接口测试的方式有很多&#xff0c;比如可以用工具&#xff08;jmeter,postman&#xff09;之类&#xff0c;也可以自己写代码进行接口测试&#xff0c;工具的使用相对来说都比较简单&#xff0c;重点是要搞清楚项目接口的协议是什么&#xff0c;然后有针对性的进行选择&a…