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

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

面试官: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

相关文章:

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

面试官:CSS3新增了哪些新特性? 一、是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观 css3是css的最新标准,是向后兼…...

Vite5 + Vue3 + Element Plus 前端框架搭建

为了开发一套高效使用的 Vite5 + Vue3 + Element Plus 前端框架,你可以按照以下步骤进行。话不多说,先上演示地址:Vue Shop Vite。 1, 安装开发环境 开发之前,确保你的电脑已经安装了 Node.js(建议使用最新稳定版 LTS),然后安装 Vite CLI。在命令行中运行以下命令: …...

STM32 内部 EEPROM 读写

STM32 的某些系列 MCU 自带 EEPROM。笔者使用的 STM32L151RET6 自带 16 KB 的 EEPROM,可以用来存储自定义的数据。在芯片选型时,自带 EEPROM 也可以作为一个考量点,省去了在外接 EEPROM 的烦恼。 下面简单介绍下 STM32 内部 EEPROM 的读写流…...

androidStudio sync failed GradlePropertiesModel (V2)

大家在增加模块的时候经常遇到吧?重启后就好了。 Cannot get GradlePropertiesModel (V2) for project ‘GradleProject{path’:app’}’ 然而,今天开机以后,无论如何,点击gradle的大象图标(Sync Project with Gradle Files)&…...

结构方程模型(SEM)

结构方程模型(Structural Equation Modeling)是分析多变量间因果关系的利器,在众多学科领域具有巨大应用潜力。我们前期推出的《基于R语言结构方程模型》课程通过结构方程原理介绍、结构方程全局和局域估计、模型构建和调整、潜变量分析、复合…...

基于UDP的网络编程

UDP服务端 #ifdef _WIN32 #define _WINSOCK_DEPRECATED_NO_WARNINGS #define close closesocket #include <winsock2.h> #else #include <arpa/inet.h> #include <netdb.h> #include <netinet/in.h> #in…...

vue判断组件有没有传入的slot有就渲染slot没有就渲染内部节点

GPT4国内站点&#xff1a;海鲸AI 在 Vue 中&#xff0c;你可以使用 $slots 对象来检查是否有特定的插槽内容被传递给组件。Vue 3 中的 $slots 是一个对象&#xff0c;其中包含了所有插槽的引用。如果插槽没有内容&#xff0c;对应的插槽属性将会是 undefined。 下面是一个例子…...

MS713/MS713T:CMOS 低压、4Ω四路单刀单掷开关,替代ADG713

产品简述 MS713/MS713T 是一款单芯片 CMOS 4 路可选择开关&#xff0c;具有低 功耗、高开关速度、低导通阻抗、低漏电和高带宽特性。其工作 电压范围是 1.8V 到 5.5V &#xff0c;可以广泛应用在电池供电仪器仪表、新 一代的模数转换和数模转换系统中。其高带宽特性可用在 …...

Android 内容生成pdf文件

1.引入itext7 implementation com.itextpdf:itext7-core:7.1.13上面比较大&#xff0c;可以直接下载需要集成的jar包 implementation files(libs\\layout-7.1.13.jar) implementation files(libs\\kernel-7.1.13.jar) implementation files(libs\\io-7.1.13.jar) implementatio…...

Javaweb-日程管理

094.日程管理第二期_准备数据库和实体类_哔哩哔哩_bilibili navicat 下载 学生认证: Navicat 教育版 - 学生许可证 | Navicat navicat连接mysql 使用navicat连接mysql数据库创建数据库、表、转储sql文件&#xff0c;导入sql数据_哔哩哔哩_bilibili...

SwiftUI之深入解析如何创建一个灵活的选择器

一、前言 在 Dribbble 上找到的设计的 SwiftUI 实现时&#xff0c;可以尝试通过一些酷炫的筛选器扩展该项目以缩小结果列表。筛选视图将由两个独立的筛选选项组成&#xff0c;两者都有一些可选项可供选择。但是&#xff0c;在使用 UIKit 时&#xff0c;总是将这种类型的视图实…...

【模拟量采集1.2】电阻信号采集

【模拟量采集1.2】电阻信号采集 1 怎么测&#xff1f;2 测输入电阻电压即转为测模拟电压值&#xff0c;这里需要考虑选用怎样的辅助电阻&#xff1f;3 实际电路分析3.1 在不考虑 VCC-5V 电压的纹波等情况时&#xff08;理想化此时输入的 VCC 就是稳定的 5V&#xff09;3.2 若考…...

c++牛客总结

一、c/c语言基础 1、基础 1、指针和引用的区别 指针是一个新的变量&#xff0c;指向另一个变量的地址&#xff0c;我们可以通过这个地址来修改该另一个变量&#xff1b; 引用是一个别名&#xff0c;对引用的操作就是对变量本身进行操作&#xff1b;指针可以有多级 引用只有一…...

ts相关笔记(基础必看)

推荐一下小册 TypeScript 全面进阶指南&#xff0c;此篇笔记来源于此&#xff0c;记录总结&#xff0c;加深印象&#xff01; 另外&#xff0c;如果想了解更多ts相关知识&#xff0c;可以参考我的其他笔记&#xff1a; vue3ts开发干货笔记TSConfig 配置&#xff08;tsconfig.…...

Docker随笔

OverView 为什么需要Docker 如果我需要部署一个服务&#xff0c;那么我需要提前部署其他应用栈&#xff0c;不同的应用栈会依赖于不用的操作系统和环境。这样做会产生一些负面影响&#xff1a; 不同版本依赖较长的部署时间不同的Dev/Test/Prod环境 这时我们需要一个工具去解…...

uni-app 前后端调用实例 基于Springboot

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…...

vue3+ts开发干货笔记

总结一下在vue3中ts的使用。当篇记录部分来自于vue官网&#xff0c;记录一下&#xff0c;算是加深印象吧。 纯干笔记&#xff0c;不断补充&#xff0c;想到什么写什么&#xff0c;水平有限&#xff0c;欢迎评论指正&#xff01; 另外&#xff0c;如果想了解更多ts相关知识&…...

Android开发新的一年Flag

在新的一年里&#xff0c;为了提升Android开发技能&#xff0c;实现更优质的应用程序&#xff0c;我们制定了2024的新年Flag。这些Flag涵盖了技术学习、代码优化、架构升级、用户体验等多个方面&#xff0c;旨在帮助我们成为更优秀的Android开发者。 1. 学习新技术 1.1. Andr…...

好的OODA循环与快慢无关

OODA循环是指观察&#xff08;Observe&#xff09;、导向&#xff08;Orient&#xff09;、决策&#xff08;Decide&#xff09;和行动&#xff08;Act&#xff09;这四个步骤的循环过程。它是一种决策和行动的框架&#xff0c;旨在帮助个人或组织更快地适应和应对变化。 OODA循…...

Android 车联网——CarUserService介绍(十三)

一、简介 CarUserService 是 Android 汽车平台的一个组件,它用于管理和提供车辆用户信息。该组件可以让开发者创建和管理与车辆用户相关的数据和配置,包括车辆拥有者和乘客的个人信息、偏好设置、用户偏好配置文件等。 CarUserService 提供了以下功能和特性: 用户配置管理:…...

【开题报告】基于微信小程序的母婴商品仓库管理系统的设计与实现

1.选题背景 随着社会经济的发展和家庭生活水平的提高&#xff0c;母婴商品市场逐渐兴起。然而&#xff0c;传统的母婴商品仓库管理方式存在着许多问题&#xff0c;如信息不透明、操作繁琐等。为了提高仓库管理的效率和准确性&#xff0c;基于微信小程序的母婴商品仓库管理系统…...

分布式锁相关问题(三)

Redis实战精讲-13小时彻底学会Redis 一、什么是分布式锁&#xff1f; 要介绍分布式锁&#xff0c;首先要提到与分布式锁相对应的是线程锁、进程锁。 l 线程锁&#xff1a;主要用来给方法、代码块加锁。当某个方法或代码使用锁&#xff0c;在同一时刻仅有一个线程执行该方法或该…...

grep!Linux系统下强大的文本搜索工具!

grep&#xff01;Linux系统下强大的文本搜索工具&#xff01; grep是一个强大的文本搜索工具&#xff0c;它可以在文件中查找包含指定字符串的行。grep的基本语法如下&#xff1a; grep [选项] "搜索字符串" 文件名其中&#xff0c;选项可以是以下几种&#xff1a;…...

(学习打卡1)重学Java设计模式之设计模式介绍

前言&#xff1a;听说有本很牛的关于Java设计模式的书——重学Java设计模式&#xff0c;然后买了(*^▽^*) 开始跟着小傅哥学Java设计模式吧&#xff0c;本文主要记录笔者的学习笔记和心得。 打卡&#xff01;打卡&#xff01; 设计模式介绍 一、设计模式是什么&#xff1f; …...

docker 部署教学版本

文章目录 一、docker使用场景及常用命令1&#xff09;docker使用场景2&#xff09;rocky8(centos8)安装 docker3&#xff09;docker 常用命令补充常用命令 二、 单独部署每个镜像&#xff0c;部署spring 应用镜像推荐&#xff08;2023-12-18&#xff09;1、 安装使用 mysql1.1 …...

2023春季李宏毅机器学习笔记 05 :机器如何生成图像

资料 课程主页&#xff1a;https://speech.ee.ntu.edu.tw/~hylee/ml/2023-spring.phpGithub&#xff1a;https://github.com/Fafa-DL/Lhy_Machine_LearningB站课程&#xff1a;https://space.bilibili.com/253734135/channel/collectiondetail?sid2014800 一、图像生成常见模型…...

C#和C++存储 和 解析 bin 文件

C 解析 bin 文件 // C 解析 bin 文件 #include <stdio.h>int main() {FILE *file; // 定义文件指针file fopen("example.bin", "rb"); // 打开二进制文件&#xff08;只读模式&#xff09;if (file NULL) {printf("无法打开文件\n");re…...

【React系列】Redux(二)中间件

本文来自#React系列教程&#xff1a;https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 中间件的使用 1.1. 组件中异步请求 在之前简单的案例中&#xff0c;redux中保存的counter是一个本地定义的数据…...

YOLOv8改进 | 2023Neck篇 | 利用Gold-YOLO改进YOLOv8对小目标检测

一、本文介绍 本文给大家带来的改进机制是Gold-YOLO利用其Neck改进v8的Neck,GoLd-YOLO引入了一种新的机制——信息聚集-分发(Gather-and-Distribute, GD)。这个机制通过全局融合不同层次的特征并将融合后的全局信息注入到各个层级中,从而实现更高效的信息交互和融合。这种…...

ubuntu环境安装配置nginx流程

今天分享ubuntu环境安装配置nginx流程 一、下载安装 1、检查是否已经安装 nginx -v 结果 2、安装 apt install nginx-core 过程 查看版本&#xff1a;nginx -v 安装路径&#xff1a;whereis nginx nginx文件安装完成之后的文件位置&#xff1a; /usr/sbin/nginx&#xf…...

做购物平台网站 民治/怎样推广小程序平台

这两天公司成立了go语言学习兴趣小组&#xff0c;慕名参与了学习。目前对于go是0基础&#xff0c;只知道它可以做高并发、效率快、编译简单、母语是C. go的安装有多种形式&#xff0c;编译安装是比较慢的一个&#xff0c;今天我就记录一下学习go编译安装流程。 1、下载软件包 h…...

wordpress怎么上传网页/2023年火爆的新闻

项目背景&#xff1a; 在近几年&#xff0c;科技的飞速发展使得数字化越来越成为当前社会的主流。同时&#xff0c;互联网技术的普及也使得人们更加依赖网络来获取信息和进行交流。因此&#xff0c;有必要提供一种安全、高效的数字化解决方案&#xff0c;以满足人们日益增长的需…...

黄浦专业做网站/站长工具精品

目录 为何使用云GPU训练我们数据集&#xff1f; 云服务器训练数据集教程&#xff1a; 1.创建实例 2.上传数据&#xff08;OSS命令&#xff09; 以下是oss的操作过程 训练模型时可能出现的报错&#xff1a; 为何使用云GPU训练我们数据集&#xff1f; 我们总是花费长达十几个…...

建设银行官方网站面试详细信息/图片在线转外链

题目链接&#xff1a;http://poj.org/problem?id2524 题目大意&#xff1a;学校共有n个同学&#xff0c;告诉你m对同学信仰同一宗教&#xff0c;问这个学校学生信仰宗教的数目最多为多少。 例&#xff1a; Sample Input 10 91 21 31 41 51 61 71 81 91 1010 42 34 54 85 80 0 …...

网站建设宣传单页/香蕉和忘忧草对焦虑的影响

8、DataGrid 显示表格数据。水很深。 详情见&#xff1a;MSDN&#xff1a;https://msdn.microsoft.com/enus/library/system.windows.c &#xff08;1&#xff09;构造函数&#xff0c;没有返回值&#xff0c;只有访问修饰符&#xff0c;名称跟类名称可一模一样 &#xff08…...

如何对现有的网站改版/内容营销

本文来自老男孩老师第三本书籍著作《老男孩的MySQL私房菜》第三章内容分享&#xff01;3.1 MySQL数据库的安装方法及选择在当今的互联网企业里&#xff0c;MySQL数据库大多运行在Linux系列操作系统上&#xff0c;当然&#xff0c;你也可以运行在Windows/Unix等商业操作系统上&a…...