1. 选择器: 属性选择器(例如:`input`) 伪类选择器(例如:`:hover`, `:focus`, `:firstchild`) 伪元素选择器(例如:`:before`, `:after`)

2. 边框和背景: `borderradius`:为元素添加圆角边框。 `boxshadow`:为元素添加阴影效果。 `borderimage`:使用图像作为边框。 `backgroundsize`:控制背景图像的大小。 `backgroundorigin`:定义背景图像的定位区域。 `backgroundclip`:定义背景图像的裁剪区域。

3. 颜色和透明度: `rgba`:支持透明度的颜色值。 `hsla`:基于HSL(色相、饱和度、亮度)的颜色值,支持透明度。

4. 字体: `@fontface`:允许自定义字体。 `fontstretch`:调整字体宽度。 `textshadow`:为文本添加阴影效果。 `textoverflow`:控制文本溢出时的显示方式。 `wordwrap`:控制长单词或URL的换行行为。

5. 文本效果: `textdecoration`:简化文本装饰线的设置。 `textjustify`:改进文本对齐方式。 `textoverflow`:控制文本溢出时的显示方式。 `wordwrap`:控制长单词或URL的换行行为。

6. 2D和3D转换: `transform`:应用于元素上的2D或3D转换。 `transformorigin`:定义转换的中心点。 `transformstyle`:定义3D空间中子元素的呈现方式。 `perspective`:为3D转换提供透视效果。

7. 动画和过渡: `transition`:定义元素的状态变化过渡效果。 `@keyframes`:定义动画的关键帧。 `animation`:应用动画效果。

8. 布局: `flexbox`:灵活的布局系统,允许更复杂的布局设计。 `grid`:基于网格的布局系统,提供更精细的控制。

9. 多列布局: `columncount`:定义列数。 `columngap`:定义列与列之间的间隔。 `columnrule`:定义列与列之间的规则。

10. 媒体查询: `@media`:根据不同的设备特性(如屏幕宽度、分辨率)应用不同的样式。

11. 其他: `resize`:允许用户调整元素的大小。 `opacity`:控制元素的透明度。 `cursor`:自定义鼠标指针的样式。 `filter`:应用图像效果,如模糊、亮度调整等。

这些新增属性使得网页设计师能够创建更加动态和响应式的网站,提供更好的用户体验。

CSS3新增属性:提升网页设计的无限可能

一、CSS3新增选择器

属性选择器

属性选择器允许根据元素的属性值来选择元素。例如,选择所有以\