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

news2024/7/4 2:33:49

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.coloradmin.cn/o/1426988.html

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

相关文章

【Linux】初始进程地址空间

最近,我发现了一个超级强大的人工智能学习网站。它以通俗易懂的方式呈现复杂的概念,而且内容风趣幽默。我觉得它对大家可能会有所帮助,所以我在此分享。点击这里跳转到网站。 目录 一、再谈fork二、程序地址空间2.1代码验证 三、虚拟地址&am…

Error: Projects must list all files or use an ‘include‘ pattern.

博主介绍:✌全网粉丝5W,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验…

【解决方案】在Vue、HTML项目中使用@spacechart/translate 插件实现在线实时翻译、自定义翻译

SpaceChart/Translate SpaceChart/Translate 是一个可配置的翻译插件,适用于任何环境,让开发者不再需要注重插件本身;插件支持自定义翻译引擎,快速生成对应的AI翻译模型客户端插件 Repository GitHubNPM Browser Support La…

计算机图形学 实验

题目要求 1.1 实验一:图元的生成:直线、圆椭区域填充 你需要完成基本的图元生成算法,包括直线和椭圆。 在区域填充中,要求你对一个封闭图形进行填充。你需要绘制一个封 闭图形(例如多边形),并选…

计算机网络实验一

目录 实验一 使用PacketTracer组建简单局域网 1、实验目的 2、实验设备 (1)内容一(组建简单局域网): (2)内容二(使用交叉线直连两台机器): &#xff08…

Java知识点总结

数据类型强转:byte short int long float double ; 数组定义 [ ]数组名 clone-复制数组equals-比较存储地址 toString sort-排序 length-长度 arraycopy([]a,s,[]b,ss,n)-数组复制 运算符及语句 instanceof双目运算符 –左对象右类 判断是否是该类创建…

【Linux】-多线程的知识都收尾(线程池,封装的线程,单例模式,自旋锁)

💖作者:小树苗渴望变成参天大树🎈 🎉作者宣言:认真写好每一篇博客💤 🎊作者gitee:gitee✨ 💞作者专栏:C语言,数据结构初阶,Linux,C 动态规划算法🎄 如 果 你 …

Unity使用反向遮罩实现镂空shader

实现步骤: 1,创建两个材质球,遮罩层的属性如下: 被遮罩层的属性如下: 2,使用两张image,遮罩层在父节点,被遮罩层在子节点,然后分别添加材质球与镂空图片 实现效果如下&a…

无人零售模式下,“IoT+鸿蒙”实现零代码搭建自动售货机监控大屏的可能性摸索

前言 新零售模式下,对loT的探索与应用还在继续。 而数字时代,数字化转型在零售行业中蔓延,而对于新的消费方式的探索,也在如火如荼的进行中。于是,一种新零售的形式——无人零售逐渐形成概念。 如果说,人…

D78XX系列——用于各种电视机、收录机、电子仪器、设备的稳压电源电路,输出电流大,内设过热、短路保护电路,无需外接元件

D78XX系列是用于各种电视机、收录机、电子仪器、设备的稳压电源电路。包括D7805、D7806、 D7808、 D7809、 D7810、 D7812、 D7815。 主要特点: ● 输出电流大,IOMAX 1A. ● 无需外接元件。 ● 内设过热、短路保护电路 ● 封装形式: T0-220

Cmake语法学习2:常用变量

目录 1.常用变量简介 1.1提供信息的变量 1.2改变行为的变量 1.3描述系统的变量 ​编辑1.4控制编译的变量 2.提供信息的变量 2.1PROJECT_SOURCE_DIR 和 PROJECT_BINARY_DIR 2.2 CMAKE_SOURCE_DIR 和 CMAKE_BINARY_DIR 2.3CMAKE_CURRENT_SOURCE_DIR 和CMAKE_CURRENT_BIN…

如何用AI人工智能写作?6个AI写作神器推荐

在日常生活中,我们往往会遇到一些关于写作方面的难题,毕竟传统的写作方式还是会存在一些局限性,幸运的是,随着人工智能技术的不断发展,AI写作已经成为了现实。AI写作神器可以帮助我们提高写作效率,解决写作…

骨传导耳机的技术原理是什么?和传统耳机相比有哪些优点?

骨传导耳机通过人体骨骼来传递声音,可以绕过耳道和耳膜直接传达音频到听者的内耳,开放双耳的佩戴方式可以在享受音乐或通话的同时保持对周围环境的感知,这种设计在户外活动或运动等场景下的使用尤为实用,可以避免堵塞耳朵&#xf…

RK3568驱动指南|驱动基础进阶篇-进阶1 编译进内核的驱动系统是如何运行的?

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

Python实现排序算法

目录 一&#xff1a;快速排序 二&#xff1a;合并排序 三&#xff1a;冒泡排序 四&#xff1a;插入排序 五&#xff1a;选择排序 一&#xff1a;快速排序 def quicksort(arr): if len(arr) < 1: return arr pivot arr[len(arr) // 2] le…

Unity | 渡鸦避难所-9 | 角色名字及血条等信息

1 效果预览 游戏中角色的名字和血条是非常重要的元素&#xff0c;它们可以帮助玩家了解角色的身份和状态。在 Unity 中&#xff0c;可以使用 UGUI 来实现这些功能 2 实现方案 1 画布 (Canvas) 画布 (Canvas) 组件表示进行 UI 布局和渲染的抽象空间。所有 UI 元素都必须是附加…

UE5 虚幻游戏报错常用解决方法(幻兽帕鲁UE5报错)

在体验使用虚幻引擎5、4&#xff08;UE5/UE4&#xff09;开发的游戏如《幻兽帕鲁》时&#xff0c;玩家可能会遇到各种报错情况&#xff0c;例如黑屏、闪退、C运行时错误等。本博客将汇集一系列有效解决方案&#xff0c;通过调整虚幻引擎内置命令行参数以及优化系统环境&#xf…

环状热力图R语言画法

环状热力图&#xff08;Circular Heatmap&#xff09;是一种以环状布局展示数据的可视化方法。它结合了热力图和极坐标系统&#xff0c;能够有效地显示数据的关系、模式和趋势。 环状热力图通常用于可视化二维数据矩阵&#xff0c;其中行和列代表不同的类别或变量&#xff0c;…

“欢天喜地迎新春”下姜村邻里守望写对联活动

卯兔追冬去&#xff0c;辰龙报春来。空谷幽香谱佳期&#xff0c;红联金句寄吉祥。春联是我国特有的文学形式&#xff0c;贴春联是继承传统习俗的一种方式&#xff0c;是对祖先的尊敬&#xff0c;对传统的继承。春节前夕&#xff0c;家家户户贴上红红的春联&#xff0c;一副副透…

前妻(C#)-基础03-枚举-预处理指令

前妻C#-基础语法03 枚举关于控制台IO及注释C#预处理指令 枚举 枚举是用户定义的整数类型。在声明一个枚举时&#xff0c;要指定改枚举的实例可以包含的一组可接受的值。不仅如此&#xff0c;还可以给值指定易于记忆的名称&#xff0c;如果在代码的某个地方&#xff0c;要试图把…