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.mfbz.cn/a/366614.html

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

相关文章

【PaddleSpeech】语音合成-男声

环境安装 系统:Ubuntu > 16.04 源码下载 使用apt安装 build-essential sudo apt install build-essential 克隆 PaddleSpeech 仓库 # github下载 git clone https://github.com/PaddlePaddle/PaddleSpeech.git # 也可以从gitee下载 git clone https://gite…

龙芯--自主架构先驱者

🛑 这是ren_dong的第23篇原创 1、概述 自主可控最高的 MIPS 架构 CPU 龙芯是我国最早研制的高性能通用处理器系列,拥有 MIPS 指令的永久授权,并拓展出了自己的指令集loong ISA。龙芯采用自主 Loong ISA 指令系统,兼容 MIPS 指令&a…

C语言——标准输出函数(printf、putchar和puts)

目录 1. 标准输入输函数出头文件2. printf2.1 函数申明2.2 基本用法2.3 占位符2.4 输出格式2.4.1 限定宽度2.4.2 总是显示正负号2.4.3 限定小数位数2.4.4 输出部分字符串 3. putchar3.1 函数申明3.2 基本用法 4. puts4.1 函数申明4.2 基本用法 1. 标准输入输函数出头文件 #inc…

由反射引出的Java动态代理与静态代理

写在开头 在《深入剖析Java中的反射,由浅入深,层层剥离!》这篇文章中我们讲反射时,曾提到过Java的动态代理中使用了反射技术,那么好,今天我们要就着反射的索引,来学习一下Java中的代理&#xf…

不下载任何插件和依赖,在线导出swagger的api接口文档(word)

一、前言 swagger是一个非常方便用来生成api的工具集,它提供了可视化的restful风格的web界面,方便查看生成的api。 但是,想要将swagger生成的api直接导出为doc文档, 似乎不太方便实现,解析swagger的json串,…

空间计算时代加速到来,需要的不只是苹果

近年来,科技行业一直在期待“寒武纪”时刻。伴随技术革命的深入推进,所有厂商都预感新的时代即将到来,并期待自己成为那个引爆点,轻轻一触,推开一扇新的未来之门。 今年开年,苹果就为科技圈锚定了一个可能…

C#拆分字符串,正则表达式Regex.Split 方法 vs String.Split 方法

目录 一、使用的方法 1.使用Split(String, String)方法 2.String.Split 方法 二、源代码 1.源码 2.生成效果 使用正则表达式可以拆分指定的字符串。同样地,使用字符串对象的Split方法也可以实现此功能。使用字符串对象的Split方法可以根据用户选择的拆分条件&…

PythonWeb框架库之fastapi使用详解

概要 Python是一门广受欢迎的编程语言,用于构建各种类型的Web应用程序。FastAPI是一个现代、高性能的Web框架,它以简单的方式提供了快速构建API的能力。本文将介绍FastAPI的各种功能和用法,并提供丰富的示例代码,帮助大家开始使用…

帮管客CRM 文件上传漏洞

免责声明:文章来源互联网收集整理,请勿利用文章内的相关技术从事非法测试,由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失,均由使用者本人负责,所产生的一切不良后果与文章作者无关。该…

指针+一维整型数组的基本运用 和 指针+一维整型数组的初步学习

一,调式程序的技巧: 1.明确问题 2.定位问题 3.加打印(打印核心数据0) 二,指针的回顾 1.指针的概念:指针就是地址(内存单元的编号),是一个数据类型(指针类型…

使用 Dockerfile 定制镜像详解

使用 Dockerfile 定制镜像详解 1.DockerfileFROM 指定基础镜像RUN 执行命令构建镜像 2.COPY 复制文件3.ADD 更高级的复制文件4.CMD 容器启动命令5.ENTRYPOINT 入口点6.ENV 设置环境变量7.ARG 构建参数8.VOLUME 定义匿名卷9.EXPOSE 暴露端口10.WORKDIR 指定工作目录11.USER 指定…

【Django】如何设置支持多语种网站,中文/英文网站

首先,需要明确一点:我们要实现的中英对照翻译,这个翻译不是浏览器翻译的,也不是Django帮你翻译。这个需要你自己事先手动翻译好,存放在专门翻译文件中,Django只是事后调用而已。 第一步 新建项目后&#x…

Python||五城P.M.2.5数据分析与可视化_使用华夫图分析各个城市的情况(中)

目录 1.上海市的空气质量 2.成都市的空气质量 【沈阳市空气质量情况详见下期】 五城P.M.2.5数据分析与可视化——北京市、上海市、广州市、沈阳市、成都市,使用华夫图和柱状图分析各个城市的情况 1.上海市的空气质量 import numpy as np import pandas as pd impor…

【毕业日记】2024.01 - 慢下来,静待花开

转眼距离930离开鹅厂已经120天了,我是很能拖延的,或者是很懂自我麻痹的,这三个多月,一直想要写点东西纪念,一直拖一直拖一直拖…… 疫情这几年经济下行里裁员是个茶余饭后“嬉笑”之余经常被提起的词,部门滚…

JVM 笔记

JVM HotSpot Java二进制字节码的运行环境 好处: 一次编写,到处运行自动内存管理,具有垃圾回收功能数组下标越界检查多态(虚方法表) JVM组成 类加载子系统(Java代码转换为字节码)运行时数据…

【代码随想录-链表】环形链表

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

GEDepth:Ground Embedding for Monocular Depth Estimation

参考代码:gedepth 出发点与动机 相机的外参告诉了相机在世界坐标系下的位置信息,那么可以用这个外参构建一个地面基础深度作为先验,后续只需要在这个地面基础深度先验基础上添加offset就可以得到结果深度,这样可以极大简化深度估…

【前端web入门第三天】02 CSS字体和文本

文章目录: 1.字体 1.1 字体大小 1.2 字体粗细 1.3 字体样式 1.4 行高 1.5 字体族 1.6 font 复合属性 2. 文本 2.1 文本缩进2.2 文本对齐方式2.3 文本修饰线2.4 color文字颜色 1.字体 1.1 字体大小 属性名: font-size属性值:文字尺寸,PC端网页最常用的单位px …

8. Threejs案例-SVG渲染器和WEBGL渲染器对比

8. Threejs案例-SVG渲染器和WEBGL渲染器对比 实现效果 知识点 SVG渲染器 (SVGRenderer) SVGRenderer 被用于使用 SVG 来渲染几何数据,所产生的矢量图形在以下几个方面十分有用: 动画标志 logo 或者图标 icon可交互的 2D 或 3D 图表或图形交互式地图复…

6、应急响应-日志自动提取自动分析ELKLogkitLogonTracerAnolog等

用途:个人学习笔记,欢迎指正 目录 背景: 一、日志自动提取-七牛Logki&观星应急工具 1、七牛Logkit: (支持Windows&Linux&Mac等) 2、观星应急工具(只支持Windows) 二、日志自动分析-Web-360星图&Goaccess&ALB&Anolog 1、W…
最新文章