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

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属性支持多个属性值同时使用,属性值间用空格隔开。

相关文章:

  • 【开源】基于JAVA+Vue+SpringBoot的用户画像活动推荐系统
  • ATT汇编
  • Leetcode 热门百题斩(第二天)
  • 09. 配置Eth-Trunk
  • Python爬虫-批量爬取免费小说并下载保存到本地
  • C++笔记(七)
  • 前缀和 差分
  • 05 - 什么是路由协议
  • 数据结构—动态查找
  • 第十章 函数 (上)第一节-第九节
  • 宠物处方单子怎么开,宠物门诊处方管理软件教程
  • JVM 笔记
  • 常见的网络安全威胁和防护方法
  • C++——构造函数
  • Android使用ScrollView导致鼠标点击事件无效
  • 深入了解以太坊
  • 【每日笔记】【Go学习笔记】2019-01-10 codis proxy处理流程
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • CAP理论的例子讲解
  • JavaScript HTML DOM
  • JavaScript异步流程控制的前世今生
  • Koa2 之文件上传下载
  • SQLServer插入数据
  • Sublime text 3 3103 注册码
  • TypeScript实现数据结构(一)栈,队列,链表
  • 浮动相关
  • 利用jquery编写加法运算验证码
  • 聊聊directory traversal attack
  • 项目管理碎碎念系列之一:干系人管理
  • 智能合约开发环境搭建及Hello World合约
  • 进程与线程(三)——进程/线程间通信
  • ​LeetCode解法汇总1410. HTML 实体解析器
  • #{} 和 ${}区别
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • (libusb) usb口自动刷新
  • (zhuan) 一些RL的文献(及笔记)
  • (zt)基于Facebook和Flash平台的应用架构解析
  • (附源码)springboot课程在线考试系统 毕业设计 655127
  • (附源码)ssm考生评分系统 毕业设计 071114
  • (附源码)ssm跨平台教学系统 毕业设计 280843
  • (黑客游戏)HackTheGame1.21 过关攻略
  • (一)ClickHouse 中的 `MaterializedMySQL` 数据库引擎的使用方法、设置、特性和限制。
  • (一)RocketMQ初步认识
  • (转)程序员技术练级攻略
  • .net core 6 redis操作类
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .net中应用SQL缓存(实例使用)
  • @html.ActionLink的几种参数格式
  • @SuppressLint(NewApi)和@TargetApi()的区别
  • @Transactional 详解
  • [ solr入门 ] - 利用solrJ进行检索
  • [2016.7.test1] T2 偷天换日 [codevs 1163 访问艺术馆(类似)]
  • [APIO2015]巴厘岛的雕塑
  • [BROADCASTING]tensor的扩散机制
  • [BUG] Hadoop-3.3.4集群yarn管理页面子队列不显示任务