前端学习笔记--CSS3

本本记录了css3的样式:浏览器支持度、圆角边框、阴影、文字与文本、过渡、动画、2d旋转、3d旋转

浏览器支持度:

前端学习笔记--CSS3

前端学习笔记--CSS3

1.圆角边框

前端学习笔记--CSS3

例:只要确定了x、y值,就能知道弧度

前端学习笔记--CSS3

前端学习笔记--CSS3

前端学习笔记--CSS3

画一个圆形:长=宽,border-radius=1/2 长

前端学习笔记--CSS3

2.阴影:inset设置是外部或内部阴影效果

前端学习笔记--CSS3

前端学习笔记--CSS3

前端学习笔记--CSS3

举例:水平偏移10,垂直偏移10,都是正数,往右偏移

前端学习笔记--CSS3

前端学习笔记--CSS3

3.文本与文字:

前端学习笔记--CSS3

text-shadow:文字阴影

阴影大小可以省略

前端学习笔记--CSS3

举例:

前端学习笔记--CSS3

word-wrap:

前端学习笔记--CSS3

前端学习笔记--CSS3

@font-face规则:规定了在网页上能够显示出的特殊字体。

前端学习笔记--CSS3

css3解决办法:

前端学习笔记--CSS3

前端学习笔记--CSS3

转换格式:

前端学习笔记--CSS3

举例:

前端学习笔记--CSS3

前端学习笔记--CSS3

4.2D转换

前端学习笔记--CSS3

旋转:

前端学习笔记--CSS3

前端学习笔记--CSS3

缩放:

前端学习笔记--CSS3

举例:鼠标悬停时放大1.2倍

前端学习笔记--CSS3

5.过渡与动画

前端学习笔记--CSS3

过渡:

前端学习笔记--CSS3

前端学习笔记--CSS3

举例:

前端学习笔记--CSS3

动画:

前端学习笔记--CSS3

举例:

前端学习笔记--CSS3

前端学习笔记--CSS3

6.3D变换

前端学习笔记--CSS3

旋转方向:

前端学习笔记--CSS3

透视效果:

前端学习笔记--CSS3

近大远小:

前端学习笔记--CSS3

3D旋转结构组成:

前端学习笔记--CSS3

案例:

前端学习笔记--CSS3

transform-style: preserve-3d     一般设置在变换元素的父容器中:

前端学习笔记--CSS3

前端学习笔记--CSS3

上一篇:[CSS3] 学习笔记-CSS动画特效


下一篇:css3动画学习资料整理