CSS3 新增了那些属性
CSS3 新增属性很多，先列举出一些关键的新增内容：
新增各种 css 选择器
盒子模型属性：border-radius、box-shadow、border-image
背景：background-size、background-origin、background-clip
文本效果：text-shadow、word-wrap
颜色：新增 RGBA，HSLA 模式
渐变：线性渐变、径向渐变
字体：@font-face
2D/3D转换：transform、transform-origin
过渡与动画：transition、@keyframes、animation
多列布局
媒体查询
以下是其中一些常见的：
border-radius：用于设置元素的圆角效果。box-shadow：用于在元素周围创建阴影效果。transition：用于控制元素的过渡效果，如颜色、大小、位置的平滑过渡。transform：用于对元素进行旋转、缩放、倾斜等变换操作。gradient：用于创建元素的渐变效果，包括线性渐变和径向渐变。flexbox：用于实现弹性盒子布局，使元素更好地适应不同屏幕尺寸。
CSS3新增伪类有那些?
:hover：鼠标悬停伪类。:active：激活伪类，例如鼠标点击时。:focus：元素获得焦点时。:visited：链接被访问过的状态。:lang(language)：根据语言匹配元素。:after：在元素之前添加内容,也可以用来做清除浮动。:before：在元素之后添加内容。:enabled：已启用的表单元素。:disabled：已禁用的表单元素。:checked： 单选框或复选框被选中。::selection：用于设置文本被选中时的样式。:nth-child(n)：选择第n个子元素，可以使用表达式来选择一定规律的子元素。:not()伪类：允许选择除了指定元素之外的所有元素。:not(selector)：选择不符合给定选择器的元素。:placeholder-shown：选择具有占位符的输入框，并且占位符可见时的样式。:valid和:invalid：选择表单元素中有效或无效的输入。:target：用于选择当前活动的目标元素。p:first-of-type：选择属于其父元素的首个<p>元素的每个<p>元素。p:last-of-type：选择属于其父元素的最后<p>元素的每个<p>元素。p:only-of-type：选择属于其父元素唯一的<p>元素的每个<p>元素。p:only-child：选择属于其父元素的唯一子元素的每个<p>元素。p:nth-child(2)：选择属于其父元素的第二个子元素的每个<p>元素。:nth-child(n)：匹配元素是父元素的第n个子元素:nth-child()：允许选择指定位置的子元素。:first-child：元素是父元素的第一个子元素。:last-child：元素是父元素的最后一个子元素。
注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！a:active 必须在 CSS
定义中的 a:hover 之后才能生效！伪类名称对大小写不敏感。
CSS3文字效果
- hanging-punctuation：规定标点字符是否位于线框之外。
- punctuation-trim：规定是否对标点字符进行修剪。
- text-align-last：设置如何对齐最后一行或紧挨着强制换行符之前的行。
- text-emphasis：向元素的文本应用重点标记以及重点标记的前景色。
- text-justify：规定当 text-align 设置为 "justify" 时所使用的对齐方法。
- text-outline：规定文本的轮廓。
- text-overflow：规定当文本溢出包含元素时发生的事情。
- text-shadow：向文本添加阴影。
- text-wrap：规定文本的换行规则。
- word-break：规定非中日韩文本的换行规则。
- word-wrap：允许对长的不可分割的单词进行分割并换行到下一行。
CSS3边框
- border-radius：CSS3圆角边框。
- box-shadow：用于向方框添加阴影。
- border-image：CSS3边框图片，可以使用图片来创建边框。
CSS3背景
- background-size：属性规定背景图片的尺寸。
- background-origin：属性规定背景图片的定位区域。
- background-clip：规定背景的绘制区域。
CSS3 转换
- transform 向元素应用 2D 或 3D 转换。
- transform-origin 允许你改变被转换元素的位置。
- transform-style 规定被嵌套元素如何在 3D 空间中显示。
- perspective 规定 3D 元素的透视效果。
- perspective-origin 规定 3D 元素的底部位置。
- backface-visibility 定义元素在不面对屏幕时是否可见。
CSS3 过渡
当元素从一种样式变换为另一种样式时为元素添加效果。
- transition：简写属性，用于在一个属性中设置四个过渡属性。
- transition-property：规定应用过渡的 CSS 属性的名称。
- transition-duration：定义过渡效果花费的时间。默认是 0。
- transition-timing-function：规定过渡效果的时间曲线。默认是 "ease"。
- transition-delay：规定过渡效果何时开始。默认是 0。
CSS3动画： ( 简单动画的实现， 如旋转等)
通过 CSS3，我们能够创建简单的动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript
依靠 CSS3 中提出的三个属性: transition 、 transform 、 animation。
transition 过渡动画：定义了元素在变化过程中是怎么样的， 包含 transition-property 、 transition-duration 、 transition-timing-function 、 transition-delay 。
transform ：定义元素的变化结果， 包含 rotate 、 scale 、 skew 、 translate 。
animation 关键帧动画 :动画定义了动作的每一帧 ( @keyframes ) 有什么效果， 包括 animation- name ， animation-duration 、 animation-timing-function 、 animation- delay 、 animation-iteration-count 、 animation-direction。
transition 过渡动画：
- transition-property：指定过渡的 CSS 属性
- transition-duration：指定过渡所需的完成时间
- transition-timing-function：指定过渡函数
- transition-delay：指定过渡的延迟时间
animation 关键帧动画：
- @keyframes：规定动画。
- animation：所有动画属性的简写属性，除了 animation-play-state 属性。
- animation-name：指定要绑定到选择器的关键帧的名称，规定 @keyframes 动画的名称。
- animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
- animation-timing-function：设置动画将如何完成一个周期，规定动画的速度曲线。默认是 "ease"。
- animation-delay：设置动画在启动前的延迟间隔，规定动画何时开始。默认是 0。
- animation-iteration-count：定义动画的播放次数，默认是 1。
- animation-direction：指定是否应该轮流反向播放动画，规定动画是否在下一周期逆向地播放。默认是 "normal"。
- animation-fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
- animation-play-state：指定动画是否正在运行或已暂停，默认是 "running"。
CSS3多列
- column-count：指定元素应该被分割的列数。
- column-fill：指定如何填充列
- column-gap：指定列与列之间的间隙
- column-rule： 所有 column-rule-* 属性的简写
- column-rule-color：指定两列间边框的颜色
- column-rule-style：指定两列间边框的样式
- column-rule-width：指定两列间边框的厚度
- column-span：指定元素要跨越多少列
- column-width：指定列的宽度
- columns：设置 column-width 和 column-count 的简写
CSS3用户界面
- resize：属性规定是否可由用户调整元素尺寸。
- box-sizing：属性允许您以确切的方式定义适应某个区域的具体内容。
- outline-offset：属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
- appearance：允许您使一个元素的外观像一个标准的用户界面元素。
- icon：为创作者提供了将元素设置为图标等价物的能力。
- nav-down：指定在何处使用箭头向下导航键时进行导航。
- nav-index：指定一个元素的Tab的顺序。
- nav-left：指定在何处使用左侧的箭头导航键进行导航。
- nav-right：指定在何处使用右侧的箭头导航键进行导航。
- nav-up：指定在何处使用箭头向上导航键时进行导航。
伪类和伪元素的区别
伪类（pseudo-class）伪类是选择器的一种，用于选择元素的特定条件的元素、状态或位置。它们以冒号（:）开头，用于向特定的元素添加样式。并基于其状态或属性来应用样式。伪类通常通过选择器的一部分来表示，常见的伪类有：:hover、:active、:focus等。它们是真实文档中已存在的元素的特殊状态。
伪元素（pseudo-element）则是在元素内部选择特定部分插入样式内容。伪元素以双冒号（::）开头，用于向文档的特定部分添加样式。常见的伪元素有::before、::after、::first-line等。它们不是真实的文档中已存在的元素，而是通过CSS生成的虚拟元素。
区别
- 伪类和伪元素的区别在于它们的作用对象不同
- 伪类是用于向特定选择器添加特殊效果的关键词，例如:hover用于鼠标悬停时的样式变化。
- 伪元素则是在文档中创建虚拟元素，并为其赋予特定样式，例如使用::before来在元素前插入内容。
- 伪类表状态
- 伪元素是真的有元素
- 前者单冒号，后者双冒号
具体来说，伪类用于选择元素的特殊状态或位置，例如悬停、点击等，而伪元素用于在元素的特定位置或内容前后插入样式。伪类用于选择已存在的元素，而伪元素则用于创建新的元素或部分。换句话说，伪类用于选择，而伪元素用于生成。
持续学习总结记录中，回顾一下上面的内容：
css3有哪些新增属性、CSS3新增伪类有那些?、CSS3文字效果、CSS3边框、CSS3背景、CSS3 转换、CSS3 过渡、CSS3动画： ( 简单动画的实现， 如旋转等)、CSS3多列、CSS3用户界面、伪类和伪元素的区别?
