css3新增的属性都有哪些

Posted 2023-04-19

css3新属性：

一、RGBA和透明度

RGBA是RGB色彩模型的一个扩展。在本质上看也是为设置的元素增加了一个 alpha 通道，即除了红绿蓝三种颜色外还增加一个代表透明度的通道，其中 RGB 值分别表示红色、绿色、蓝色，而 alpha 取值则为 0 到 1 （小数位一位）。

二、background属性

background-image：设置元素的背景图像。

background-origin：规定背景图片的定位区域。

background-size ：规定背景图片的尺寸。

background-repeat：设置是否及如何重复背景图像。

三、word-wrap属性

word-wrap 属性允许长单词或 URL 地址换行到下一行。

注：所有主流浏览器都支持 word-wrap 属性。

基础语法：

word-wrap: normal|break-word;


四、text-shadow属性

text-shadow 属性：向文本设置阴影。

text-shadow基础语法：

text-shadow： 5px 5px 5px #FF0000;


参数分别表示：水平阴影，垂直阴影，模糊距离，阴影颜色；


五、font-face属性

font-face属性：定义自己的字体

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

六、border-radius属性

border-radius 属性：是一个简写属性，用于设置四个 border-*-radius 属性。

基础语法：

border-radius: 1-4 length|% / 1-4 length|%;


注：该属性允许您为元素添加圆角边框！

七、border-image属性

border-image：将图片规定为包围 div 元素的边框

border-image基础语法：

border-image: url(border.png) 30 30 round


八、box-shadow属性

box-shadow属性：向框添加一个或多个阴影。（盒阴影）

box-shadow基础语法：

box-shadow: 10px 10px 5px #888888


九、媒体查询

媒体查询定义两套css，当浏览器的尺寸变化时会采用不同的属性。

参考技术A

- css3 
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面

选择器

框模型

背景和边框 
border-radius、box-shadow、border-image、 
background-size：规定背景图片的尺寸 
background-origin：规定背景图片的定位区域 
background-clip：规定背景的绘制区域

文本效果（常用） 
text-shadow：设置文字阴影 
word-wrap：强制换行 
word-break 
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range

2/3D转换 
transform：向元素应用2/3D转换 
transition：过渡

动画

@keyframes规则： 
animation、animation-name、animation-duration等

用户界面（常用） 
box-sizing、resize 
css3新增伪类 
：nth-child() 
：nth-last-child() 
：only-child 
：last-child 
：nth-of-type() 
：only-of-type() 
：empty 
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。 
：enabled 
：disabled 
：checked 
：not

html5都有哪些新特性

参考技术A HTML5对比传统HTML有很多的新特性，包括了
1、语义化标签：对比之前HTML没有体现结构语义化的标签，如：<div id="header"></div>，HTML5提供语义化标签，如：<header><article><footer><nav><aside><section>等
2、增强型表单：多个新的表单 Input 输入类型，如：color,url,date等这些新特性提供了更好的输入控制和验证。新增表单元素，如：<output>，用于用于不同类型的输出，比如计算或脚本输出。新增表单属性，如：placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
3、新增视频 <video> 和音频 <audio> 标签

4、Canvas绘图

5、SVG绘图
6、地理定位
7、拖放API
8、Web Worker
9、Web Storage
10、WebSocket