HTML5:七天学会基础动画网页4
backgorund-size
值与说明
length(单位像素):设置背景图片高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个是设置为auto。
percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个是设置为auto。
cover:把背景图片扩展至足够大，使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景特定区域中。
contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
语法:
background-size 100px
100%(可以通过这个压缩图片) cover
contain
background-origin
值与说明
padding-box:背景图像相对于内边距框来定位
border-box:背景图像相对于边框盒来定位
content-box:背景图像相对于内容框来定位
background-clip
值与说明
padding-box:背景被裁剪到内边距框
border-box:背景被裁剪到边框盒
content-box:背景被裁剪到内容框
box-show盒子阴影
(给内容添加阴影，使其更加立体)
h-shadow:必须的值，水平阴影的位置，允许负值。
v-shadow:必须的值，垂直阴影的位置，允许负值。
blur:可选的值，模糊距离。
spread:可选的值，阴影的尺寸，外延值。
color:可选的值，阴影的颜色。
inset:可选的值，将外部阴影(outset)改为内部 阴影
语法:box-show:水平 垂直 模糊的尺寸 阴影的宽度 阴影颜色
我们来随便写一个鼠标放置产生阴影变化的例子:
<style>
*{
margin: 0;
height: 0;
}
.box{
width: 300px;
height: 500px;
border: 1px solid black;
margin: 60px auto;
}
.box:hover{
box-shadow: 47px 47px 12px 12px #999;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
没有固定的参数，效果都是靠后期调整出来的。
这个盒子阴影的应用场景是很多的，这里以个小米的商城为例子
我们的鼠标放置后它会产生一个略微放大和阴影的效果，更有立体感。
今天就说这么多吧，说个题外话，最近OpenAI的sora不是火了吗，网上出来很多所谓AI讲师来卖课，不说百分之百其实也差不多了，都是出来割韭菜的，朋友们细心一点小心别被骗，如果有时间后面可以开一期讲这个，没有就算了，最后祝大家工作顺利，生活愉快。
相关文章：
HTML5:七天学会基础动画网页4
backgorund-size 值与说明 length(单位像素):设置背景图片高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个是设置为auto。 percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度，…...
Web安全之接口鉴权
目录 接口鉴权定义 为什么会有cookie还有session还有token这种技术的存在?...
shardingsphere 集成springboot【水平分表】
创建sharding_sphere数据库 在数据库中创建两张表，t_order_1和t_order_2 分片规则：如果订单编号是偶数添加到t_order_1,如果是奇数添加到t_order_2 创建实体类 public class Order { private Integer id; private Integer orderType; private Int…...
GO 的 Web 开发系列（六）—— 遍历路径下的文件
文件 IO 处理是程序的基础功能，WEB 程序中通过文件 IO 实现附件的上传与下载。在 GO 中，有多种方式可以遍历文件目录，获取文件路径，本文从使用层面上论述这些函数。 预先准备一个包含子目录的目录，用于遍历测试&#…...
Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder
概述 当界面的内容需要依靠网络请求的数据，就需要处理苦恼的，状态是空，非空的逻辑了，不然页面构建可能会报错，而FutureBuilder提供了一个非常好的解决方法，直接看代码 代码 异步操作函数 即网络请求函数…...
Git教程-Git的基本使用
Git是一个强大的分布式版本控制系统，它不仅用于跟踪代码的变化，还能够协调多个开发者之间的工作。在软件开发过程中，Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程，我们将深入探讨Git的基本概念和…...
Java解决长度为K子的数组中的的最大和
Java解决长度为K子的数组中的的最大和 01 题目 给你一个整数数组 nums 和一个整数 k 。请你从 nums 中满足下述条件的全部子数组中找出最大子数组和： 子数组的长度是 k，且子数组中的所有元素 各不相同 。 返回满足题面要求的最大子数组和。如果不存在子…...
【手机端测试】adb基础命令
一、什么是adb adb（Android Debug Bridge）是android sdk的一个工具 adb是用来连接安卓手机和PC端的桥梁，要有adb作为二者之间的维系，才能让用户在电脑上对手机进行全面的操作。 Android的初衷是用adb这样的一个工具来协助开发人…...
【数据结构】深入探讨二叉树的遍历和分治思想(一)
🚩纸上得来终觉浅， 绝知此事要躬行。 🌟主页：June-Frost 🚀专栏：数据结构 🔥该文章主要讲述二叉树的递归结构及分治算法的思想。 目录： 🌍前言：🌍…...
 和 post() 方法—— W3school 详解 简单易懂（二十四）)
jQuery AJAX get() 和 post() 方法—— W3school 详解 简单易懂（二十四）
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据 GET 基本…...
Linux中如何进行LVM逻辑卷扩容?
#注意：如果lv所在的vg有空间直接扩容就ok了！ 1.创建pv pvcreate /dev/sdb 执行以上命令得到以下内容： Physical volume "/dev/sdb" successfully created. 2.直接vgextend扩容 vgextend vg1 /dev/sdb #卷组名字，将…...
现代企业架构框架——应用架构
现代企业架构框架——应用架构。 现代企业架构中的应用架构是指企业在构建和维护应用系统时所采用的一种架构框架。应用架构旨在实现应用系统的可扩展性、灵活性、可维护性和可重用性，以满足企业在数字化时代对应用系统的快速交付和持续创新的需求。下面将详细介绍应用架构的…...
期货开户保证金保障市场正常运转
期货保证金是什么？在期货市场上，采取保证金交易制度，投资者只需按期货合约的价值，交一定比率少量资金即可参与期货合约买卖交易，这种资金就是期货保证金。期货保证金（以下简称保证金〕按性质与作用的不同。…...
WebGIS----wenpack
学习资料：https://webpack.js.org/concepts/ 简介： Webpack 是一个现代化的 JavaScript 应用程序的模块打包工具。它能够将多个 JavaScript 文件和它们的依赖打包成一个单独的文件，以供在网页中使用。 Webpack 还具有编译和转换其他类型文…...
【Maven】Maven 基础教程（二）：Maven 的使用
《Maven 基础教程》系列，包含以下 2 篇文章： Maven 基础教程（一）：基础介绍、开发环境配置Maven 基础教程（二）：Maven 的使用 😊 如果您觉得这篇文章有用 ✔️ 的话&#…...
mirthConnect忽略HTTPS SSL验证
mirthConnect SSL忽略验证 1、下载https网站证书 点击不安全---->证书无效 2、查看mirth 秘钥库口令 在mirthConnect 的conf目录下面keystore.storepass 3、导入证书到本地 在jdk的bin目录下面执行 keytool -importcert -file "下载的网站证书路径" -keysto…...
libvirt命名空间xmlns:qemu的使用
示例xml <domain type{domain_type} xmlns:qemuhttp://libvirt.org/schemas/domain/qemu/1.0><qemu:commandline><qemu:commandline><qemu:arg value-newarg/><qemu:env nameQEMU_ENV valueVAL/></qemu:commandline></domain>"…...
ywtool check命令及ywtool clean命令
一.ywtool check命令 1.1 ywtool check -I 1.2 ywtool check all 1.3 ywtool check io 1.4 ywtool check elk 1.5 ywtool check php 1.6 ywtool check mysql 1.7 ywtool check nginx 1.8 ywtool check system 1.9 ywtool check docker_nbip [容器名称] 1.10 ywtool check 1.10…...
java009 - Java面向对象基础
1、类和对象 1.1 什么是对象 万物皆对象，客观存在的事物皆为对象。 1.2 什么是面向对象 1.3 什么是类 类是对现实生活中一类具有共同属性和行为的事物抽象。 特点： 类是对象的数据类型类是具有相同属性和行为的一组对象的集合 1.4 什么是对象的属…...
MWC 2024 | 广和通携手意法半导体发布智慧家居解决方案
世界移动通信大会2024期间，广和通携手横跨多重应用领域、全球排名前列的半导体公司意法半导体（STMicroelectronics，以下简称ST；纽约证券交易所代码：STM）发布支持Matter协议的智慧家居解决方案。该方案在广和…...
浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）
✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义（Task Definition&…...
进程地址空间（比特课总结）
一、进程地址空间 1. 环境变量 1 ）⽤户级环境变量与系统级环境变量 全局属性：环境变量具有全局属性，会被⼦进程继承。例如当bash启动⼦进程时，环 境变量会⾃动传递给⼦进程。 本地变量限制：本地变量只在当前进程(ba…...
智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
AtCoder 第409场初级竞赛 A~E题解
A Conflict 【题目链接】 原题链接：A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串，只有在同时为 o 时输出 Yes 并结束程序，否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...
【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）
🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包（Closure）？闭包有什么应用场景和潜在问题？2.解释 JavaScript 的作用域链（Scope Chain） 二、原型与继承3.原型链是什么？如何实现继承&a…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的？
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件，用于在原生应用中加载 HTML 页面： 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...