CSS3新增了哪些新特性?
CSS3新增了哪些新特性?
一、是什么
css
,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观
css3
是css
的最新标准,是向后兼容的,CSS1/2
的特性在CSS3
里都是可以使用的
而CSS3
也增加了很多新特性,为开发带来了更佳的开发体验
二、选择器
css3
中新增了一些选择器,主要为如下图所示:
三、新样式
边框
css3
新增了三个边框属性,分别是:
border-radius:创建圆角边框
box-shadow:为元素添加阴影
border-image:使用图片来绘制边框
box-shadow
设置元素阴影,设置属性如下:
- 水平阴影
- 垂直阴影
- 模糊距离(虚实)
- 阴影尺寸(影子大小)
- 阴影颜色
- 内/外阴影
其中水平阴影和垂直阴影是必须设置的
背景
新增了几个关于背景的属性,分别是background-clip
、background-origin
、background-size
和background-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
新增了新的颜色表示方式rgba
与hsla
- 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
CSS3新增了哪些新特性?相关推荐
- CSS3新增了哪些新特性
一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更美观 css3是css的最新标准,是向后兼容的,CSS1/2 的 ...
- 11.CSS3新增了哪些新特性?
一.是什么 css,即层叠样式表(Cascading Style Sheets)的简称,是一种标记语言,由浏览器解释执行用来使页面变得更为美观 css3是css的最新标准,是向后兼容的,CSS1/2的 ...
- ES5 to ESNext — 自 2015 以来 JavaScript 新增的所有新特性
type: FrontEnd title: ES5 to ESNext - here's every feature added to JavaScript since 2015 link: medi ...
- CSS3中的一些新特性(CSS)
CSS3中的一些新特性 CSS3能做什么 边框 阴影 box-shadow 颜色 文字与字体 背景 CSS3中的动画 CSS3是CSS2的升级版本,3只是版本号,它在CSS2.1的基础上增加了很多强大 ...
- html5语义化边框,Html5、Css3、ES6的新特性
html5的新特性 1.语义化标签有利于seo,有助于爬虫抓取更多的有效信息,爬虫是依赖于标签来确定上下文和各个关键字的权重. 语义化的html在没有css的情况下也能呈现较好的内容结构与代码结构 方 ...
- H5新增了哪些新特性
目录 前言 1.语义化标签 2.form表单增强 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理位置定位(Geolocation API ) 7.拖放API 8.Web Worker ...
- Java基础学习总结(159)——JDK15 正式发布了!新增14个新特性
前言 2020-09-15 Oracle 如期发布了JDK15了.在的 JDK 真变成了"版本帝",无力吐槽啊,版本发到 15,大部分人却都还在用着 JDK 7/8,甚至 6.不过 ...
- web前端基础 html5+css3(十.html5css3新特性)
1.html5新增的语义化标签(针对搜索引擎,提高优化) <header>:头部标签 <nav>:导航标签 <active>:内容标签 <section> ...
- CSS3中文手册,新特性速查
定位 Positioning position z-index top right bottom left clip 布局 Layout display float clear visibility ...
最新文章
- ml不是内部或外部命令_美国飞机制造商波音公司采用VR技术训练宇航员 ; Snap Lens Studio推出支持自定义ML驱动的Snapchat镜头...
- 父与子的编程python_父母在人生尚有来处,父母去人生只剩归途!(看一次,哭一次)...
- 微信小程序引入字体图标
- MySQL命令行下执行.sql脚本详解
- opencv如何截取子图像
- 第17天学习Java的笔记(匿名对象,随机数,猜数字小游戏)
- SAP Fiori应用里对国际化RTL需求(right-to-left)的支持
- 德国留学语言c1,德国留学申请,关于语言
- MUI 拍照和从系统相册选择图片上传
- Android系统性能优化(67)----内存泄漏检测
- Max Time-Delay Neural Networks
- Cypress自动化测试系列之三
- php粉层,thinkphp 模型分层
- golang 对象转json
- 【day4】【洛谷算法题】-P5708三角形面积-刷题反思集[入门1顺序结构]
- 工业和信息化部关于贯彻落实《推进互联网协议第六版(IPv6)规模部署行动计划》的通知
- Minio过期分片上传文件清理引出的系统配置
- Leetcode 每日一题——860. 柠檬水找零
- 《城市化》(顾朝林)-重要术语
- GDAL+Python实现栅格影像处理之栅格矢量化及矢量栅格化
热门文章
- tomcat 内存 jvm PermSize 调整
- 笔记本借用服务器性能优秀强大,超强性能笔记本之工作站,非游戏用户看过来...
- k8s 查看 pod 网段
- 争议“校讯通” 半夜扰人花钱被自愿
- 【HDU No. 1263】水果
- 微信sdk服务器文档,4.4. 微信小程序 SDK 集成文档
- js对象长度与js数组长度
- 普洱突围“春茶江湖”,抖音电商「春茶普洱季」解锁好茶生意新增量
- Android USB通讯(完整版)
- 杰里之AC696N 低电 VBAT 检测不准说明【篇】