思潮课程 / 前端开发 / 正文

css3有哪些新特性,h5和css3有哪些新特性

2024-12-24前端开发阅读 6

1. 挑选器：特点挑选器：如 `input`。伪类挑选器：如 `:hover`、`:firstchild`、`:lastchild`、`:nthchild` 等。伪元素挑选器：如 `::before`、`::after`。

2. 布景和边框：布景巨细：`backgroundsize`。布景原点：`backgroundorigin`。布景裁剪：`backgroundclip`。多布景：可认为一个元素设置多个布景。边框图片：`borderimage`。

3. 色彩和透明度： RGBA 和 HSLA 色彩形式，支撑透明度。突变：线性突变（`lineargradient`）和径向突变（`radialgradient`）。

4. 文本作用：文本暗影：`textshadow`。文本溢出：`textoverflow`。文本换行：`wordwrap` 和 `wordbreak`。

5. 2D 转化：平移：`translate`。缩放：`scale`。旋转：`rotate`。歪斜：`skew`。

6. 3D 转化： 3D 平移：`translate3d`。 3D 缩放：`scale3d`。 3D 旋转：`rotate3d`。透视：`perspective`。

7. 动画： `@keyframes` 规矩，用于创立动画。 `animation` 特点，用于使用动画作用。

8. 过渡： `transition` 特点，用于在特点值改动时增加过渡作用。

9. 多列布局： `columncount`、`columngap`、`columnrule` 等。

10. Flexbox 布局：一套用于更灵敏的布局的特点，如 `display: flex`、`justifycontent`、`alignitems` 等。

11. 网格布局： `display: grid`，`gridtemplatecolumns`，`gridtemplaterows` 等，用于创立杂乱的二维布局。

12. 媒体查询： `@media` 规矩，用于依据不同的设备特性（如屏幕宽度、分辨率等）使用不同的款式。

13. 盒模型： `boxsizing` 特点，能够指定盒模型的核算方法。

14. 暗影：盒暗影：`boxshadow`。文本暗影：`textshadow`。

15. 反射： `reflect` 函数，用于创立元素的反射作用。

16. 过渡作用： `transition` 特点，用于在特点值改动时增加过渡作用。

17. 字体： `@fontface` 规矩，用于自定义字体。

这些新特性使得网页规划愈加灵敏和强壮，能够创立出愈加丰厚和动态的视觉作用。

CSS3的新特性解析

css 获取屏幕高度, 视口单位（vw和vh）