web前端开发--------阴影与转换

1.阴影分为文本阴影和盒子阴影

我们使用text-shadow属性为文本添加阴影效果,使用结构伪类为第一个子元素p添加阴影效果;

水平偏移量为负值时,表示阴影向左偏移;

垂直偏移量为负值时,表示阴影向上偏移。

盒子阴影与文本阴影的使用方法相似,但盒子阴影主要用于给元素框添加阴影效果。

盒子阴影:box-shadow

下面的是阴影和状态伪类的结合使用;hover是悬浮的时候显示

在盒子阴影中,默认阴影在边框外,即阴影向外扩散。

我们还可以使用inset属性值,使得阴影落在盒子内部,这样看起来就像是内容被压低了。

2.转换

transform属性用于设置元素的移动,旋转,缩放和倾斜等变换操作。

移动属性值,由两部分构成,第一部分是translate函数------------第二部分为translate()函数的参数,两个参数以逗号隔开。

第一个参数表示水平移动距离,正数向右,负数向左;

第二个参数表示垂直移动距离,正数向下,负数向上。

在transform属性中,使用rotate()函数可以实现元素的旋转。

rotate()函数包含一个参数,代表旋转的角度,角度由数值和单位组成。

示例中,将第二张图片顺时针旋转90度,其中deg是英文degree(角度)的简写。

注意,角度为正表示顺时针旋转,角度为负表示逆时针旋转。

在transform属性中,使用scale()函数可以使元素沿着水平方向和垂直方向缩放。

scale()函数包含两个参数,依次表示元素水平方向和垂直方向的缩放比例。

示例中,第二张图片的水平和垂直方向都放大1.5倍。

在transform属性中,使用skew()函数可以使元素沿着水平方向和垂直方向倾斜。

skew()函数包含两个参数,依次表示元素水平方向和垂直方向的倾斜角度。

示例中,将第二张图片在水平方向倾斜了30度,垂直方向倾斜了10度。

transform属性支持多个属性值同时使用,属性值间用空格隔开。

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

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

相关文章

【Vue】2-14、插槽 自定义指令

一、插槽 插槽&#xff08;Slot&#xff09;是 vue 为组件的封装者提供的能力。允许封装者在封装组件时&#xff0c;把不确定的&#xff0c;希望由用户指定的部分定义为插槽。 <template><div class"app-container"><h1>App 根组件</h1>&…

【Mysql】数据库架构学习合集

目录 1. Mysql整体架构1-1. 连接层1-2. 服务层1-3. 存储引擎层1-4. 文件系统层 2. 一条sql语句的执行过程2-1. 数据库连接池的作用2-2. 查询sql的执行过程2-1. 写sql的执行过程 1. Mysql整体架构 客户端&#xff1a; 由各种语言编写的程序&#xff0c;负责与Mysql服务端进行网…

大力说视频号第二课:视频号如何挂链接带货

最近&#xff0c;随着视频号带货的风潮&#xff0c;不少小伙伴已经成功跟上潮流&#xff0c;在这个平台上轻松赚取收入。 然而&#xff0c;仍有不少小伙伴对于如何在视频号中挂链接带货感到有些困惑。 目前&#xff0c;视频号的主流带货方式主要分为三种&#xff1a; 01 挂“…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第9章 项目范围管理(四)

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…

回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测

回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测 目录 回归预测 | Matlab实现CPO-LSTM【24年新算法】冠豪猪优化长短期记忆神经网络多变量回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现CPO-LSTM【24年新算…

工业自动化中与多台PLC通讯的基本指南

与多台PLC进行通讯是工业自动化中常见的需求。通常&#xff0c;一台THM&#xff08;通常是触摸屏或人机界面&#xff09;会与多台PLC进行通讯&#xff0c;以实现数据交互和控制功能。以下是一个基本的步骤指南&#xff0c;用于实现1台THM与多台PLC的通讯&#xff1a; 确定通讯…

在本机搭建私有NuGet服务器

写在前面 有时我们不想对外公开源码&#xff0c;同时又想在VisualStudio中通过Nuget包管理器来统一管理这些内部动态库&#xff0c;这时就可以在本地搭建一个NuGet服务器。 操作步骤 1.下载BaGet 这是一个轻量级的NuGet服务器 2.部署BaGet 将下载好的release版本BaGet解…

Linux系统管理和Shell脚本笔试题

1、写一个sed命令&#xff0c;修改/tmp/input.txt文件的内容&#xff0c;要求&#xff1a;(1) 删除所有空行&#xff1b;(2) 在非空行前面加一个"AAA"&#xff0c;在行尾加一个"BBB"&#xff0c;即将内容为11111的一行改为&#xff1a;AAA11111BBB #写入内…

Android 中的卡顿优化

常见的手机卡顿现象&#xff1a; 视频加载慢&#xff1b;画面卡顿、卡死、黑屏&#xff1b;声音卡顿、音画不同步&#xff1b;动画帧卡顿&#xff0c;交互响应慢&#xff1b;滑动不跟手&#xff1b;列表自动更、滚动不流畅&#xff1b;网络响应慢、数据和画面展示慢&#xff1…

【机器学习 深度学习】卷积神经网络简述

&#x1f680;个人主页&#xff1a;为梦而生~ 关注我一起学习吧&#xff01; &#x1f4a1;专栏&#xff1a;机器学习 欢迎订阅&#xff01;相对完整的机器学习基础教学&#xff01; ⭐特别提醒&#xff1a;针对机器学习&#xff0c;特别开始专栏&#xff1a;机器学习python实战…

算法:箱子之形摆放

一、算法描述及解析 要求将一批箱子按从上到下以‘之’字形的顺序摆放在宽度为 n 的空地上&#xff0c;输出箱子的摆放位置&#xff0c; 例如&#xff1a;箱子ABCDEFG&#xff0c;空地宽为3。 如输入&#xff1a; ABCDEFG 3 输出&#xff1a; AFG BE CD 注&#xff1a;最后一行…

uni-app 经验分享,从入门到离职(三)——关于 uni-app 生命周期快速了解上手

文章目录 &#x1f4cb;前言⏬关于专栏 &#x1f3af;什么是生命周期&#x1f9e9;应用生命周期&#x1f4cc; 关于 App.vue/App.uvue &#x1f9e9;页面生命周期&#x1f4cc;关于 onShow 与 onLoad 的区别 &#x1f4dd;最后 &#x1f4cb;前言 这篇文章是本专栏 uni-app 基…

MacBook安装虚拟机Parallels Desktop

MacBook安装虚拟机Parallels Desktop 官方下载地址: https://www.parallels.cn/pd/general/ 介绍 Parallels Desktop 被称为 macOS 上最强大的虚拟机软件。可以在 Mac 下同时模拟运行 Win、Linux、Android 等多种操作系统及软件而不必重启电脑&#xff0c;并能在不同系统间随…

MySQL原理(一)架构组成之逻辑模块(2)缓存机制

前面提到了mysql的逻辑模块中包含Query Cache 。 一、查询缓存 1、作用 MySQL查询缓存即缓存查询数据的SQL文本及查询结果,用Key-Value的形式保存在服务器内存中。当查询命中缓存,MySQL会立刻返回结果,跳过了解析,优化和执行阶段。 2、查询缓存的命中条件 &#xff08;1&a…

canvas路径剪裁clip(图文示例)

查看专栏目录 canvas实例应用100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

(软件分享)Fotor - AI照片编辑器

【应用名称】&#xff1a;Fotor - AI照片编辑器 【适用平台】&#xff1a;#Android 【软件标签】&#xff1a;#Fotor 【应用版本】&#xff1a;7.5.0.2➡7.5.1.5 【应用大小】&#xff1a;225MB 【软件说明】&#xff1a;软件升级更新。Fotor 包含编辑照片所需的所有工具。用户…

踩坑系列——mysql数据库字段类型为tinyint输入字符串条件查询无效

背景 排查问题发现有个查询sql的条件传的字符串‘ENABLE’&#xff0c;而数据库这个字段类型是tinyint&#xff0c;值只有0和1&#xff0c;看查询结果过滤出的都是值为0的数据。按自己理解这个语句应该查不出数据&#xff0c;但是结果非预期 排查 问了下ChatGpt给的回答是这…

CH395Q之CH395Q驱动库移植与驱动库分析(二)

本节主要介绍以下内容&#xff1a; 一、CH395Q驱动库移植 二、源码分析 一、CH395Q驱动库移植 驱动库移植主要有两个途径&#xff0c;一个是南京沁恒官方网址&#xff0c;一个是通过正点原子官方&#xff0c;原子官方对沁横官方提供的驱动库进行了完善与修改。自用的话推荐…

1个 THM 和多台 BSP 的通讯(以邦纳 BSP 系列 PLC 为例)

一&#xff0e;架构和接线如下图所示 二、建立连接 选择 PLC 的驱动&#xff0c;多台连接请勾选“次连接” “次连接总数”就是要连接的 PLC 台数。 设置触摸屏通讯参数&#xff1b;同时确保每台 PLC 的通讯参数与该设定相同&#xff08;但站号不能相同&#xff09;。 三、…

HTML -- 常用标签

标签 表示HTML网页内容的一个最基本的组织单元&#xff0c;类似于语文中的标点符号&#xff0c; 标签的作用&#xff1a;告诉浏览器当前标签中的内容是什么&#xff0c;以什么格式在页面中进行呈现 单标签 单标签&#xff08;只有一个标签名的标签&#xff09;的标签格式&…