JavaScript-notes/css3新特性.txt at master · ding-mouren/JavaScript-notes · GitHub

Repository navigation

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

一、边框属性：

1、border-radius

2、box-shadow

3、border-image

二、颜色属性：

1、RGBA（R,G,B,A（透明度））

2、渐变linear-gradient

三、文字与字体

1、text-overflow

2、word-wrap

3、嵌入字体@font-face

4、文本阴影text-shadow

四、背景样式

1、background-origin

2、background-clip

3、background-size

4、multiple backgrounds

五、css3选择器

属性选择器：

1、E[att^="val"]{}

2、E[att$="val"]{}

3、E[att*="val"]{}

结构性伪类选择器：

1、root

2、not

3、empty

4、target

5、first-child

6、last-child

7、nth-child(n)

8、nth-last-child(n)

其他：

1、first-of-type

2、nth-of-type（n）

3、last-of-type

4、nth-last-of-type(n）

5、only-child

6、only-of-type

7、enabled

8、disabled

9、checked

10、：：selection

11、：read-only

12、：read-write

13、：：before

14、：：after

六、CSS3中的变形与动画

1、旋转rotate()

2、扭曲skew()

3、缩放scale()

4、位移translate()

5、矩阵matrix()

6、原点tranform-origin

7、过渡属性transition-property

8、过渡所需时间transition-duration

9、过渡函数transition-timing-function

10、过渡延迟时间transition-delay

11、keyframes关键帧

12、调用动画animation-name

13、动画播放时间animation-duration

14、动画播放方式animation-timing-function

15、动画开始播放时间animation-delay

16、动画播放方向animation-direction

17、动画播放状态animation-play-state

18、动画时间外属性animation-fill-mode

七、布局样式

1、多列布局columns

2、column-width

3、column-count

4、列间距column-gap

5、列表边框column-rule

6、跨列设置column-span

7、盒子模型

8、伸缩布局flexbox（flexible box)

八、媒体类型Media Queries

响应式布局Responsive

1、流体网格

2、弹性图片

3、媒体查询

4、屏幕分辨率

5、主要断点

九、其他重要属性

1、自由缩放属性resize

2、CSS3外轮廓属性outline

3、CSS生成内容content,配合伪类选择器使用