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服务端进行网…

go数据操作-elasticsearch

go-elasticsearch是Elasticsearch 官方提供的 Go 客户端。每个 Elasticsearch 版本会有一个对应的 go-elasticsearch 版本。 1.安装依赖 执行以下命令安装v8版本的 go 客户端。 go get github.com/elastic/go-elasticsearch/v8latest导入依赖。 import "github.com/el…

vue学习——elementPlus安装及国际化

引入完整的elementPlus 安装 pnpm i element-plus引入 // main.ts import { createApp } from vue import ElementPlus from element-plus import element-plus/dist/index.css import App from ./App.vueconst app createApp(App)app.use(ElementPlus) app.mount(#app)图标…

JAVA斗地主逻辑-控制台版

未排序版&#xff1a; 准备牌->洗牌 -> 发牌 -> 看牌: App程序入口&#xff1a; package doudihzu01;public class App {public static void main(String[] args) {/*作为斗地主程序入口这里不写代码逻辑*///无参创建对象&#xff0c;作为程序启动new PokerGame();…

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

最近&#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年新算…

QT 范例阅读: undoframework

一、功能 通过给 QGraphicsScene 添加、删除、移动 QGraphicsPolygonItem 来演示 撤销重做功能 标签 undo framework example 二、核心代码&#xff0c;以添加图例为例 MainWindow.cpp 的核心代码 //1 创建堆栈 undoStack new QUndoStack(this); //2 以列表的形式显…

LeetCode第783题 - 二叉搜索树节点最小距离

题目 解答 方案一 class Solution {private List<Integer> values new ArrayList<>();public void inorder(TreeNode node) {if (node null) {return;}inorder(node.left);values.add(node.val);inorder(node.right);}public int minDiffInBST(TreeNode root)…

AI 代码生成

1 csdnC知道 https://so.csdn.net/chat?from_spm1008.2611.3001.9686 2 百度搜索AI伙伴 https://chat.baidu.com/ 3 阿里通义千问 https://tongyi.aliyun.com/qianwen/?spm5176.28326591.0.0.2a8a6ee1TUqfmH //还有的小伙伴们留言,我来整理 //感谢大家的点赞&#xff0c;…

工业自动化中与多台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解…

docker搭建nginx的RTMP服务器的步骤

使用Docker 另一个选项是使用Docker容器运行Nginx和RTMP模块。Docker Hub上有一些预构建的镜像&#xff0c;这些镜像已经集成了Nginx和RTMP模块&#xff0c;可以直接使用&#xff0c;无需手动编译。 例如&#xff0c;使用一个预构建的Nginx-RTMP Docker镜像&#xff1a; doc…

docker- php7.4

安装 gd拓展 anzhuanga在Dockerfile里面安装php7.4的GD库 - 知乎 apt update apt install -y libwebp-dev libjpeg-dev libpng-dev libfreetype6-devdocker-php-source extractdocker-php-ext-configure gd \ --with-jpeg/usr/include \ --with-freetype/usr/include/docker-…

Java Path详解

Java Path详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入探讨Java中的Path&#xff0c;解析它的功能、用法以及在文件处理中的应用…

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;最后一行…