当前位置： 首页 > news >正文

HTML5:七天学会基础动画网页4

news 2026/2/9 18:18:53

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>

ac60a306958f435aabb4af232756c70c.png

 没有固定的参数，效果都是靠后期调整出来的。

这个盒子阴影的应用场景是很多的，这里以个小米的商城为例子

2bbcaa8909ae456a9b4112d6188de214.png

 我们的鼠标放置后它会产生一个略微放大和阴影的效果，更有立体感。

今天就说这么多吧，说个题外话，最近OpenAI的sora不是火了吗，网上出来很多所谓AI讲师来卖课，不说百分之百其实也差不多了，都是出来割韭菜的，朋友们细心一点小心别被骗，如果有时间后面可以开一期讲这个，没有就算了，最后祝大家工作顺利，生活愉快。

 

 

 

相关文章：

HTML5:七天学会基础动画网页4

backgorund-size 值与说明 length(单位像素):设置背景图片高度和宽度&#xff0c;第一个值设置宽度&#xff0c;第二个值设置高度&#xff0c;如果只给出一个值&#xff0c;第二个是设置为auto。 percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度&#xff0c…...

编程日记 2024/3/1 9:18:30

Web安全之接口鉴权

目录 接口鉴权定义 为什么会有cookie还有session还有token这种技术的存在?...

编程日记 2024/3/1 9:17:29

shardingsphere 集成springboot【水平分表】

创建sharding_sphere数据库 在数据库中创建两张表&#xff0c;t_order_1和t_order_2 分片规则&#xff1a;如果订单编号是偶数添加到t_order_1,如果是奇数添加到t_order_2 创建实体类 public class Order { private Integer id; private Integer orderType; private Int…...

编程日记 2024/3/1 9:16:27

GO 的 Web 开发系列（六）—— 遍历路径下的文件

文件 IO 处理是程序的基础功能&#xff0c;WEB 程序中通过文件 IO 实现附件的上传与下载。在 GO 中&#xff0c;有多种方式可以遍历文件目录&#xff0c;获取文件路径&#xff0c;本文从使用层面上论述这些函数。 预先准备一个包含子目录的目录&#xff0c;用于遍历测试&#…...

编程日记 2024/3/1 9:15:26

Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder

概述 当界面的内容需要依靠网络请求的数据&#xff0c;就需要处理苦恼的&#xff0c;状态是空&#xff0c;非空的逻辑了&#xff0c;不然页面构建可能会报错&#xff0c;而FutureBuilder提供了一个非常好的解决方法&#xff0c;直接看代码 代码 异步操作函数 即网络请求函数…...

编程日记 2024/3/1 9:14:24

Git教程-Git的基本使用

Git是一个强大的分布式版本控制系统&#xff0c;它不仅用于跟踪代码的变化&#xff0c;还能够协调多个开发者之间的工作。在软件开发过程中&#xff0c;Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程&#xff0c;我们将深入探讨Git的基本概念和…...

编程日记 2024/3/1 9:13:23

Java解决长度为K子的数组中的的最大和

Java解决长度为K子的数组中的的最大和 01 题目 给你一个整数数组 nums 和一个整数 k 。请你从 nums 中满足下述条件的全部子数组中找出最大子数组和&#xff1a; 子数组的长度是 k&#xff0c;且子数组中的所有元素 各不相同 。 返回满足题面要求的最大子数组和。如果不存在子…...

编程日记 2024/3/1 9:12:22

【手机端测试】adb基础命令

一、什么是adb adb&#xff08;Android Debug Bridge&#xff09;是android sdk的一个工具 adb是用来连接安卓手机和PC端的桥梁&#xff0c;要有adb作为二者之间的维系&#xff0c;才能让用户在电脑上对手机进行全面的操作。 Android的初衷是用adb这样的一个工具来协助开发人…...

编程日记 2024/3/1 9:08:18

【数据结构】深入探讨二叉树的遍历和分治思想(一)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;数据结构 &#x1f525;该文章主要讲述二叉树的递归结构及分治算法的思想。 目录&#xff1a; &#x1f30d;前言&#xff1a;&#x1f30d;…...

编程日记 2024/3/1 9:05:14

jQuery AJAX get() 和 post() 方法—— W3school 详解 简单易懂（二十四）

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求&#xff1a;GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是&#xff1a;GET 和 POST。 GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据 GET 基本…...

编程日记 2024/3/1 9:04:12

Linux中如何进行LVM逻辑卷扩容?

#注意&#xff1a;如果lv所在的vg有空间直接扩容就ok了&#xff01; 1.创建pv pvcreate /dev/sdb 执行以上命令得到以下内容&#xff1a; Physical volume "/dev/sdb" successfully created. 2.直接vgextend扩容 vgextend vg1 /dev/sdb #卷组名字&#xff0c;将…...

编程日记 2024/3/1 8:58:05

现代企业架构框架——应用架构

现代企业架构框架——应用架构。 现代企业架构中的应用架构是指企业在构建和维护应用系统时所采用的一种架构框架。应用架构旨在实现应用系统的可扩展性、灵活性、可维护性和可重用性，以满足企业在数字化时代对应用系统的快速交付和持续创新的需求。下面将详细介绍应用架构的…...

编程日记 2024/3/1 8:47:55

期货开户保证金保障市场正常运转

期货保证金是什么&#xff1f;在期货市场上&#xff0c;采取保证金交易制度&#xff0c;投资者只需按期货合约的价值&#xff0c;交一定比率少量资金即可参与期货合约买卖交易&#xff0c;这种资金就是期货保证金。期货保证金&#xff08;以下简称保证金〕按性质与作用的不同。…...

编程日记 2024/3/1 8:46:55

WebGIS----wenpack

学习资料&#xff1a;https://webpack.js.org/concepts/ 简介&#xff1a; Webpack 是一个现代化的 JavaScript 应用程序的模块打包工具。它能够将多个 JavaScript 文件和它们的依赖打包成一个单独的文件&#xff0c;以供在网页中使用。 Webpack 还具有编译和转换其他类型文…...

编程日记 2024/3/1 8:40:49

【Maven】Maven 基础教程（二）：Maven 的使用

《Maven 基础教程》系列&#xff0c;包含以下 2 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#…...

编程日记 2024/3/1 8:39:48

mirthConnect忽略HTTPS SSL验证

mirthConnect SSL忽略验证 1、下载https网站证书 点击不安全---->证书无效 2、查看mirth 秘钥库口令 在mirthConnect 的conf目录下面keystore.storepass 3、导入证书到本地 在jdk的bin目录下面执行 keytool -importcert -file "下载的网站证书路径" -keysto…...

编程日记 2024/3/1 8:36:45

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>"…...

编程日记 2024/3/1 8:31:39

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…...

编程日记 2024/3/1 8:30:38

java009 - Java面向对象基础

1、类和对象 1.1 什么是对象 万物皆对象&#xff0c;客观存在的事物皆为对象。 1.2 什么是面向对象 1.3 什么是类 类是对现实生活中一类具有共同属性和行为的事物抽象。 特点&#xff1a; 类是对象的数据类型类是具有相同属性和行为的一组对象的集合 1.4 什么是对象的属…...

编程日记 2024/3/1 8:21:29

MWC 2024 | 广和通携手意法半导体发布智慧家居解决方案

世界移动通信大会2024期间&#xff0c;广和通携手横跨多重应用领域、全球排名前列的半导体公司意法半导体&#xff08;STMicroelectronics&#xff0c;以下简称ST&#xff1b;纽约证券交易所代码&#xff1a;STM&#xff09;发布支持Matter协议的智慧家居解决方案。该方案在广和…...

编程日记 2024/3/1 8:18:26

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

编程新知 2026/1/25 14:43:07

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

C# SqlSugar：依赖注入与仓储模式实践

C# SqlSugar&#xff1a;依赖注入与仓储模式实践 在 C# 的应用开发中&#xff0c;数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护&#xff0c;许多开发者会选择成熟的 ORM&#xff08;对象关系映射&#xff09;框架&#xff0c;SqlSugar 就是其中备受…...

编程新知 2025/11/25 6:49:02

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2026/2/4 16:23:56

Python Ovito统计金刚石结构数量

大家好，我是小马老师。 本文介绍python ovito方法统计金刚石结构的方法。 Ovito Identify diamond structure命令可以识别和统计金刚石结构，但是无法直接输出结构的变化情况。 本文使用python调用ovito包的方法，可以持续统计各步的金刚石结构，具体代码如下： from ovito…...

编程新知 2026/1/26 5:39:08

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

AirSim/Cosys-AirSim 游戏开发（四）外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

编程新知 2026/2/5 18:58:39

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

编程新知 2026/2/8 5:05:41

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

云原生安全实战：API网关Envoy的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关 作为微服务架构的统一入口&#xff0c;负责路由转发、安全控制、流量管理等核心功能。 2. Envoy 由Lyft开源的高性能云原生…...

编程新知 2026/2/8 3:38:05