面试官:CSS3新增了哪些新特性?

news2025/1/19 11:10:07

面试官:CSS3新增了哪些新特性?

一、是什么

css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观

css3css的最新标准,是向后兼容的,CSS1/2 的特性在 CSS3 里都是可以使用的

CSS3 也增加了很多新特性,为开发带来了更佳的开发体验

二、选择器

css3中新增了一些选择器,主要为如下图所示:

三、新样式

边框

css3新增了三个边框属性,分别是:

  • border-radius:创建圆角边框

  • box-shadow:为元素添加阴影

  • border-image:使用图片来绘制边框

box-shadow

设置元素阴影,设置属性如下:

  • 水平阴影
  • 垂直阴影
  • 模糊距离(虚实)
  • 阴影尺寸(影子大小)
  • 阴影颜色
  • 内/外阴影

其中水平阴影和垂直阴影是必须设置的

背景

新增了几个关于背景的属性,分别是background-clipbackground-originbackground-sizebackground-break

background-clip

用于确定背景画区,有以下几种可能的属性:

  • background-clip: border-box; 背景从border开始显示
  • background-clip: padding-box; 背景从padding开始显示
  • background-clip: content-box; 背景显content区域开始显示
  • background-clip: no-clip; 默认属性,等同于border-box

通常情况,背景都是覆盖整个元素的,利用这个属性可以设定背景颜色或图片的覆盖范围

background-origin

当我们设置背景图片时,图片是会以左上角对齐,但是是以border的左上角对齐还是以padding的左上角或者content的左上角对齐? border-origin正是用来设置这个的

  • background-origin: border-box; 从border开始计算background-position
  • background-origin: padding-box; 从padding开始计算background-position
  • background-origin: content-box; 从content开始计算background-position

默认情况是padding-box,即以padding的左上角为原点

background-size

background-size属性常用来调整背景图片的大小,主要用于设定图片本身。有以下可能的属性:

  • background-size: contain; 缩小图片以适合元素(维持像素长宽比)
  • background-size: cover; 扩展元素以填补元素(维持像素长宽比)
  • background-size: 100px 100px; 缩小图片至指定的大小
  • background-size: 50% 100%; 缩小图片至指定的大小,百分比是相对包 含元素的尺寸

background-break

元素可以被分成几个独立的盒子(如使内联元素span跨越多行),background-break 属性用来控制背景怎样在这些不同的盒子中显示

  • background-break: continuous; 默认值。忽略盒之间的距离(也就是像元素没有分成多个盒子,依然是一个整体一样)
  • background-break: bounding-box; 把盒之间的距离计算在内;
  • background-break: each-box; 为每个盒子单独重绘背景

文字

word-wrap

语法:word-wrap: normal|break-word

  • normal:使用浏览器默认的换行
  • break-all:允许在单词内换行

text-overflow

text-overflow设置或检索当当前行超过指定容器的边界时如何显示,属性有两个值选择:

  • clip:修剪文本
  • ellipsis:显示省略符号来代表被修剪的文本

text-shadow

text-shadow可向文本应用阴影。能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色

text-decoration

CSS3里面开始支持对文字的更深层次的渲染,具体有三个属性可供设置:

  • text-fill-color: 设置文字内部填充颜色

  • text-stroke-color: 设置文字边界填充颜色

  • text-stroke-width: 设置文字边界宽度

颜色

css3新增了新的颜色表示方式rgbahsla

  • rgba分为两部分,rgb为颜色值,a为透明度
  • hala分为四部分,h为色相,s为饱和度,l为亮度,a为透明度

四、transition 过渡

transition属性可以被指定为一个或多个CSS属性的过渡效果,多个属性之间用逗号进行分隔,必须规定两项内容:

  • 过度效果
  • 持续时间

语法如下:

transition: CSS属性,花费时间,效果曲线(默认ease),延迟时间(默认0)

上面为简写模式,也可以分开写各个属性

transition-property: width; 
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

五、transform 转换

transform属性允许你旋转,缩放,倾斜或平移给定元素

transform-origin:转换元素的位置(围绕那个点进行转换),默认值为(x,y,z):(50%,50%,0)

使用方式:

  • transform: translate(120px, 50%):位移
  • transform: scale(2, 0.5):缩放
  • transform: rotate(0.5turn):旋转
  • transform: skew(30deg, 20deg):倾斜

六、animation 动画

动画这个平常用的也很多,主要是做一个预设的动画。和一些页面交互的动画效果,结果和过渡应该一样,让页面不会那么生硬

animation也有很多的属性

  • animation-name:动画名称
  • animation-duration:动画持续时间
  • animation-timing-function:动画时间函数
  • animation-delay:动画延迟时间
  • animation-iteration-count:动画执行次数,可以设置为一个整数,也可以设置为infinite,意思是无限循环
  • animation-direction:动画执行方向
  • animation-paly-state:动画播放状态
  • animation-fill-mode:动画填充模式

七、渐变

颜色渐变是指在两个颜色之间平稳的过渡,css3渐变包括

  • linear-gradient:线性渐变

background-image: linear-gradient(direction, color-stop1, color-stop2, …);

  • radial-gradient:径向渐变

linear-gradient(0deg, red, green);

八、其他

关于css3其他的新特性还包括flex弹性布局、Grid栅格布局,这两个布局在以前就已经讲过,这里就不再展示

除此之外,还包括多列布局、媒体查询、混合模式等等…

参考文献

  • https://juejin.cn/post/6844903518520901639#heading-1

  • https://www.w3school.com.cn/css/index.asp

  • https://github.com/ytanck/ytanck.github.io/issues/73

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

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

相关文章

十、基本对话框大集合(Qt5 GUI系列)

目录 一、设计需求 二、实现代码 三、代码解析 四、总结 一、设计需求 Qt提供了很多标准的对话框。例如标准文件对话框(QFileDialog)、标准颜色对话框(QColorDialog)、标准字体对话框 (QFontDialog)、标准输入对话框 (QInputDialog) 及消息对话框 (QMessageBox)。本文展示各…

编写.NET的Dockerfile文件构建镜像

创建一个WebApi项目,并且创建一个Dockerfile空文件,添加以下代码,7.0代表的你项目使用的SDK的版本,构建的时候也需要选择好指定的镜像tag FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base WORKDIR /app EXPOSE 80 EXPOSE 443F…

[论文笔记] Megtron_LM 0、报错:vscode调试无法传进去参数 launch.json文件获取args参数

解决方法: 配置好launch.json文件后,应该点运行和调试里面的运行按钮。而不是直接点文件右上角的debug。 可以看到terminal中,如果没有正常加载launch.json,则参数中没有args的参数。 如果正常加载,可以看到args的很多…

docker镜像仓库详解(Docker Registry)

本片文章主要是对docker的镜像仓库进行了详解。其中包含了一些常用了 docker 指令,通过举例进行详解。也详细解释了镜像仓库的工作机制和常见的镜像仓库。也实际拉去和运行了一些镜像。希望本篇文章会对你有所帮助! 文章目录 一、什么是Docker Registry …

Python Selenium如何下载网页中的图片到本地?(Base64编码的图片下载)

前言: 在网页上,图片有时会以Base64编码的形式嵌入在HTML中,而不是作为单独的文件提供。这种方式的优点是可以减少HTTP请求的数量,因为图片数据直接包含在HTML中,不需要额外的请求来获取图片文件。这对于小图片…

如何解决vscode中文路径的问题

首先我们进入设备 搜索“区域”,选择“区域设置” 点击管理语言设置 点击更改系统区域设置,勾选“Beta 版: 使用 Unicode UTF-8 提供全球语言支持(U)”,电脑会叫你重启,你重启就行了

mysql四大引擎、账号管理以及建库

目录 一.数据库存储引擎1.1存储引擎的查看1.2InnoDB1.3MyISAM1.4 MEMORY1.5 Archive 二.数据库管理2.1元数据库分类2.2 操作2.3 MySQL库 三.数据表管理3.1三大范式3.2 整形3.3 实数3.4 字符串3.5 text&blob3.6 日期类型3.7 选中标识符 四.数据库账号管理4.1 查询用户4.2查看…

某音关键词搜索商品接口,某音关键词搜索商品列表接口,宝贝详情页接口,某音商品比价接口接入方案

要接入API接口以采集电商平台上的商品数据,可以按照以下步骤进行: 1、找到可用的API接口:首先,需要找到支持查询商品信息的API接口。这些信息通常可以在电商平台的官方文档或开发者门户网站上找到。 2、注册并获取API密钥&#x…

DRF从入门到精通九(权限控制)

文章目录 一、权限控制模型1) ACL(Access Control List,访问控制列表)2) RBAC(Role-Based Access Control,基于角色的访问控制)应用前后台权限控制实操 3) ABAC(Attribute-Based Access Control,基于属性的访问控制) 一、权限控制模型 1) ACL(Access Control List,访问控制列表…

dart 学习 区分好setter,getter和一般的函数

看看代码可以很好的分析 setter ,getter 和普通的函数有什么区别 void main() {car a new car("奔驰", 12);print(a.name);a.age 100;print(a.age);a.setname "宝马"; // 调用 setterprint(a.getage); // 调用gettera.setter("雷克萨斯…

React Hooks中useState的介绍,并封装为useSetState函数的使用

useState 允许我们定义状态变量,并确保当这些状态变量的值发生变化时,页面会重新渲染。 useState 返回值 const [state, setState] useState(initialState);useState 返回一个长度为 2 的数组。通常,我们这样定义状态变量: co…

经纬度的作用

当我们在手机上使用导航软件或者在网上查找地址时,经常会发现一个选项,就是显示当前位置的经纬度。那么,什么是经纬度,它有什么作用呢? 经纬度是用来确定地球上任何一个点位置的坐标系统。它由两个数值组成&#xff0…

华为DriveONE电机控制器拆解实拍

如果说之前的问界M5、M7,华为让我们看到其在智能化上确实拥有遥遥领先的能力,那么在智界S7上,则让我们看到华为在动力、底盘这些硬件执行层面,竟然也有不输给很多车企的实力。1、华为电驱,全球第一?在智界S…

手游开发项目经验简单总结

这是我最近一个完整的手游开发项目的总结信息,请大家指点 目录 引擎 语言 编辑器 项目开发模块规划分 主项目工程,UI资源项目工程,模型场景资源项目工程 热更框架 前后端协议 UI 图集 多语言适配 SLG场景和其他场景 战斗 美术模型资源 人物…

Glide加载不出图片与请求浏览器资源时中文转码问题

报错代码如图:Image load failed: Failed to load resourse 首先确保你的图片 URL 地址是正确的,可以通过在浏览器中直接访问这个 URL 来测试。另外,确保 URL 地址不包含特殊字符或空格,以免影响加载。 然后确定依赖库没有问题&am…

支持下载和阅读的漫画管理工具Teemii

什么是 Teemii ? Teemii 是一款专为狂热漫画读者设计的精简 Web 应用程序。它为阅读和管理漫画集提供了一个简单而高效的平台。主要功能包括跨平台访问、浏览器内阅读、强大的元数据聚合器以及馆藏自动更新。Teemii 是专为那些寻求更加个性化和自主的方法来管理漫画…

学习汽车LIN总线该如何入门?

关注菲益科公众号—>对话窗口发送 “CANoe ”或“INCA”,即可获得canoe入门到精通电子书和INCA软件安装包(不带授权码)下载地址。 目录 1. 车载LIN总线诞生背景和使用场景 2. LIN总线硬件接口 3. Lin总线协议 4. 总结 1、车载LIN总线…

VSCode远程开发配置和SSH免密登录

目录 概要远程开发插件安装开始连接SSH免密登录开发环境配置 概要 现在很多公司都是直接远程到服务器上写代码,使用远程开发,可以在与生产环境相同的环境中开发、测试和部署代码,减少因环境不同而导致的问题。本文将详细介绍如何通过VSCode连…

(02)半导体前道制程工艺概览

01、半导体制程工艺概览 在第一篇的最后,我们说到金属氧化物半导体场效应晶体管(MOSFET)的平面式结构让人们可以在晶圆上同时制造出好几个MOSFET。且与第一代晶体管BJT不同,MOSFET无需焊接过程。本期内容就让我们来详细了解一下具体的制程工艺。 为方便讲解,我们先来看一…

电脑报错“KBDRU.DLL文件丢失,软件无法启动”,KBDRU.DLL文件下载,修复方法

很多用户在日常使用电脑的时候,或多或少都遇到过,在启动游戏或软件的时候,Windows桌面会弹出错误提示框“KBDSN1.DLL文件缺失,造成软件无法启动或运行,请尝试重新安装解决”。 不少用户,会根据提示重装游戏…