css3背景渐变

1.线性渐变

    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            float: left;
            margin-left: 50px;
        }
        .box1 {
            background-image: linear-gradient(green, yellow, red);
        }
        /* 右上 */
        .box2 {
            background-image: linear-gradient(to right top, green, yellow, red);
        }
        .box3 {
            background-image: linear-gradient( 60deg, green, yellow, red);
        }
        .box4 {
            background-image: linear-gradient(green 50px, yellow 100px, red 150px);
        }
        .box5 {
            background-image: linear-gradient(20deg, green 50px, yellow 100px, red 150px);
            font-size: 80px;
            font-weight: bold;
            line-height: 200px;
            color: transparent;
            -webkit-background-clip: text;
        }
    </style>
<body>
    
    <div class="box box1">box1</div>
    <div class="box box2">box2</div>
    <div class="box box3">box3</div>
    <div class="box box4">box4</div>
    <div class="box box5">
        hello
    </div>
</body>

 2.径向渐变

    <style>
        .box {
            width: 200px;
            height: 150px;
            border: 1px solid black;
            float: left;
            margin-left: 50px;
        }
        .box1 {
            /* 默认情况 */
            background-image: radial-gradient(red, yellow, green);
        }
        .box2 {
            /* 圆心在右上角 */
            background-image: radial-gradient(at right top, red, yellow, green);
        }
        .box3 {
            /* 圆心在(20,40) */
            background-image: radial-gradient(at 20px 40px,red, yellow, green);
        }
        .box4 {
            /* 通过circle,调整为⚪ */
            background-image: radial-gradient(circle,red, yellow, green);
        }
        .box5 {
            /* 圆半径是 100 50,圆心位置(120,60) */
            background-image: radial-gradient(100px 50px at 120px 60px ,red, yellow, green);
        }
    </style>
<body>
    
    <div class="box box1">默认</div>
    <div class="box box2">调整径向圆心</div>
    <div class="box box3">通过左边调整中心位置</div>
    <div class="box box4">通过circle,调整为⚪ </div>
    <div class="box box5"> 圆半径是 100 50,圆心位置(120,60)</div>
</body>

3.重复渐变

无论线性渐变,还是径向渐变,在没有发生渐变的位置,继续进行渐变,就为重复渐变。

利用重复渐变实现网格效果

代码如下:

.box {
            width: 600px;
            height: 800px;
            padding: 20px;
            border: 1px solid black;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-image: repeating-linear-gradient(transparent 0, transparent 29px, #333 30px);
            background-clip: content-box;
 }



<div class="box"></div>

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

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

相关文章

SAP MM学习笔记16-在库品目评价

在库品目评价是指评估物料。具体比如物料价格&#xff0c;数量&#xff0c;保管场所等发生变化的时候&#xff0c;判断是否发生了变化&#xff0c;要不要生成 FI票&#xff0c;用哪个FI科目来进行管理等内容就叫在库品目评价。 在库品目评价有很多层级&#xff0c;这里先讲3兄弟…

基于Qlearning强化学习的路径规划算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 Q值更新规则 4.2 基于Q-learning的路径规划算法设计 4.3 Q-learning路径规划流程 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ..…

Mybatis三剑客(一)在springboot中自动生成Mybatis【generator】

1、pom.xml中新增plugin <plugin><groupId>org.mybatis.generator</groupId><artifactId>mybatis-generator-maven-plugin</artifactId><version>1.3.7</version><configuration><overwrite>true</overwrite><…

分布式 - 服务器Nginx:一小时入门系列之动静分离

文章目录 1. 动静分离的好处2. 分离静态文件3. 修改 Nginx 配置文件4. location 命令修饰符优先级 1. 动静分离的好处 Apache Tocmat 严格来说是一款java EE服务器&#xff0c;主要是用来处理 servlet请求。处理css、js、图片这些静态文件的IO性能不够好&#xff0c;因此&…

IDEA关闭项目,但是后台程序没有关闭进程(解决方案)

最近遇到一个很奇怪的问题&#xff0c;idea关闭项目后&#xff0c;系统进程没有杀死进程&#xff0c;再次执行的时候会提示端口占用&#xff0c;并提示Process exited with an error: 1 (Exit value: 1) 错误原因&#xff1a;应用程序关闭后&#xff0c;进程不能同步关闭 解决方…

[vscode]vscode运行cmake时候exe不执行而且前面多一些字符

遇到一个奇怪问题,你单独打开cmd去执行vscode编译过程序没问题&#xff0c;但是你在vscode确不会执行&#xff0c;这是因为vscode没有读取到电脑环境变量导致加载DLL失败&#xff0c;但是在vscode终端不会给你提示少DLL&#xff0c;需要你自己把DLL复制到exe目录即可解决问题。…

关于Cesium的常见需求整理之点位和弹窗(点位弹窗)

一、点位上图 ①在Cesium中&#xff0c;每个自定义的地图元素被视为一个entity对象&#xff0c;如果我们要添加点位到地图上&#xff0c;那就必须先创建一个entity对象。 var entity new Cesium.Entity({position: position, });以上代码我们创建了一个entity对象&#xff0…

Python Opencv实践 - 图像缩放

import cv2 as cv import numpy as np import matplotlib.pyplot as pltimg_cat cv.imread("../SampleImages/cat.jpg", cv.IMREAD_COLOR) plt.imshow(img_cat[:,:,::-1])#图像绝对尺寸缩放 #cv.resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) #指定Size大…

CANoe自动化工程的搭建

基于XMLCAPL建立自动化工程 1、导入ini文件2、新建 Test Environment3、报告类型4、代码编写 1、导入ini文件 工程的配置的文件&#xff0c;配置DUT相关信息&#xff0c;具体视工程而编写内容。 2、新建 Test Environment 1、新建XML测试用例环境 2、导入XML测试用例文件 …

关于Neo4j的使用及其基本命令

关于Neo4j的使用 文章目录 关于Neo4j的使用1、启动方式2、创建新节点&#xff0c;节点内有属性3、创建关系4、查询节点5、查询关系6、删除两个节点的关系7、删除节点8、删除某个标签的全部关系9、某个节点添加属性10、删除节点某个属性 1、启动方式 进入bin目录&#xff1a; …

Web 服务器 -【Tomcat】的简单学习

Tomcat1 简介1.1 什么是Web服务器 2 基本使用2.1 下载2.2 安装2.3 卸载2.4 启动2.5 关闭2.6 配置2.7 部署 3 Maven创建Web项目3.1 Web项目结构3.2 创建Maven Web项目 4 IDEA使用Tomcat4.1 集成本地Tomcat4.2 Tomcat Maven插件 Tomcat 1 简介 1.1 什么是Web服务器 Web服务器是…

Neo4j笔记-数据迁移(导出/导入)

这里先说明以下几点&#xff1a; Neo4j在4.0下版本默认的库名是&#xff1a;graph.db Neo4j在4.0上版本默认的库名是&#xff1a;neo4j.db 不管是Neo4j&#xff0c;还是Neo4j Desktop&#xff0c;都会在bin目录下有neo4j、neo4j-admin软件。在conf目录下&#xff0c;有neo4j.…

unity实现角色体力功能【体力条+体力计算】

导读&#xff1a;实现功能 1、角色体力计算 2、角色疲劳动画 3、体力条制作、跟随 默认做好角色的idle/run/walk动画、切换和玩家输入&#xff0c;我使用的是新输入系统&#xff0c;动画时单变量混合树&#xff0c;参数Sports。 【每一部分功能根据自己需求观看哦】 1、角色体…

科研论文中SCI,SSCI ,CSSCI是什么

目录 1 SCI 2 SSCI 3 CSSCI 什么是SCI&#xff0c;SSCI &#xff0c;CSSCI 目前&#xff0c;在国际科学界&#xff0c;如何正确评价基础科学研究成果已引起越来越广泛的关注。而被SCI、SSCI收录的科技论文的多寡则被看作衡量一个国家的基础科学研究水平、科技实力和科技论文…

HarmonyOS SDK开放能力,服务鸿蒙生态建设,打造优质应用体验

华为开发者大会2023&#xff08;HDC.Together&#xff09;于8月4日至6日在东莞松山湖举行&#xff0c;在HarmonyOS端云开放能力技术分论坛上&#xff0c;华为为广大开发者们介绍了HarmonyOS SDK开放能力在基础开发架构、功能特性等方面的变化之处&#xff0c;通过将常见的通用能…

市面上最好用的4款免费ETL工具推荐

一、ETL介绍 ETL流程是数据仓库建设的核心环节&#xff0c;它涉及从各种数据源中抽取数据&#xff0c;经过清洗、转换和整合&#xff0c;最终加载到数据仓库中以供分析和决策。在数据仓库国产化的背景下&#xff0c;ETL流程扮演着重要的角色&#xff0c;今天我们就来讲讲ETL流…

MATLAB算法实战应用案例精讲-【图像处理】图像分类模型Swin TrasnformerViT

目录 Swin Trasnformer 1. 模型介绍 2. 模型结构 3. 模型实现 4. 模型特点 5. 模型效果 ViT( Vision Transformer) 模型介绍 模型结构与实现 1. 图像分块嵌入 2. 多头注意力 3. 多层感知机&#xff08;MLP&#xff09; 4. DropPath 5. 基础模块 6. 定义ViT网络 …

两个数组的交集-C语言/Java

描述 给定两个数组 nums1 和 nums2 &#xff0c;返回 它们的交集 。输出结果中的每个元素一定是 唯一 的。我们可以 不考虑输出结果的顺序。&#xff08;1 < nums1.length, nums2.length < 1000&#xff0c;0 < nums1[i], nums2[i] < 1000&#xff09; 示例1 输入…

TCP和UDP

目录 TCP和UDP是什么&#xff1f; TCP和UDP有什么区别? 三次握手和四次挥手 解决大量TIME_WAIT问题的核心方法 TCP维护可靠的通信方式 TCP协议的长连接和短连接 长连接的保活机制 Syn泛洪攻击 拥塞控制 滑动窗口的原理 什么是粘包以及粘包的原因 粘包的处理方式 …