有哪些css3新特性

css3的新特性有选择器、盒模型、颜色、背景、边框和阴影、文字效果、布局和流式布局、多列布局、动画和过渡、响应式设计等。详细介绍：1、选择器，属性选择器、伪类选择器、伪元素选择器和多重选择器；2、盒模型，box-sizing属性改变了默认的css盒模型，使其更容易进行布局；3、颜色，css3增加了对透明度的支持，使用rgba()、hsla()或opacity来设置等等。

本教程操作系统：windows10系统、DELL G3电脑。

CSS3 是 CSS 技术的最新演变，它引入了许多新特性来增强设计师和开发人员的设计能力。以下是一些 CSS3 的新特性：

1. 选择器：

   • 属性选择器：选择具有特定属性的元素，例如 [attr=value]。
   • 伪类选择器：为特定状态的元素添加样式，例如 :hover、:active、:visited。
   • 伪元素选择器：选择特定部分的元素，例如 ::before、::after。
   • 多重选择器：使用逗号分隔来同时选择多个元素，例如 element1, element2。

2. 盒模型：Box-sizing 属性改变了默认的 CSS 盒模型，使其更容易进行布局。

   立即学习“前端免费学习笔记（深入）”；

3. 颜色：

   • CSS3 增加了对透明度的支持，使用 rgba()、hsla() 或 opacity 来设置。
   • CSS3 提供了新的颜色空间，如 RGBA、HSL 和 HSLA。

4. 背景：

   • background-size：允许您更改背景图像的大小。
   • background-repeat：使您能够更改背景图像的重复行为。
   • background-position：允许您在水平和垂直方向上移动背景图像。
   • background-image：允许多背景图像同时使用。

5. 边框和阴影：

   • border-radius：为边框添加圆角。
   • box-shadow：为元素添加阴影效果。

6. 文字效果：

   • text-shadow：为文本添加阴影效果。
   • text-overflow：处理溢出文本的显示方式。

7. 布局和流式布局：

   • Flexbox：用于一维布局的 CSS3 新布局模型。
   • Grid：用于二维布局的 CSS3 新布局模型。

8. 多列布局（Multi-column Layout）：CSS3 提供了一种创建多列文本或布局的方法，类似于报纸的排版。

9. 动画和过渡（Animations and Transitions）：CSS3 支持关键帧动画和过渡效果，用于在 CSS 中创建动态效果。动画可以通过 transition 和 animation 属性进行控制。

10. 响应式设计（Responsive Design）：CSS3 提供了一些特性，如媒体查询（Media Queries），允许开发人员创建在不同设备和屏幕尺寸上都能良好显示的响应式网页设计。

11. 其他特性：

    • CSS3 增加了对 SVG 图像的支持。
    • CSS3 提供了一种新的方式来定义字体（@font-face）。
    • CSS3 支持自定义的伪元素（例如，::before 和 ::after）。
    • CSS3 支持更复杂的 CSS 选择器，如子选择器（child selectors）、相邻同胞选择器（adjacent sibling selectors）等。
    • CSS3 支持轮廓（outline）和内轮廓（outline-offset）属性，它们在突出显示元素时非常有用。
    • CSS3 支持线性渐变（linear gradients）和径向渐变（radial gradients）。
    • CSS3 支持在页面上直接绘制图形，如矩形、圆形、椭圆等，这是通过使用 canvas 元素和 JavaScript 来实现的。
    • CSS3 支持生成字体的复杂样式，包括字体装饰（font decorations）如上标（superscript）、下标（subscript）等。

12. 在HTML5中新出现的属性在CSS3中也被支持，如 video, audio, placeholder, input-type-radio, input-type-checkbox, input-type-number, input-type-range, input-type-date, input-type-time, input-type-datetime, input-type-month, input-type-week, input-type-email, input-type-search, input-type-tel, input-type-color, progress, meter, fieldset, output, keygen, datalist, command, map, area, track, wbr 等。这些新属性使HTML5能够更好地支持新的Web应用和新的用户需求。