web前端基础知识(三)#CSS3新特性

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展。
CSS庞大而且比较复杂，CSS3把CSS分解为一些小的模块，更多新的模块也被加入进来。CSS3中的模块包括： 盒子模型、列表模块、超链接方式
、语言模块 、背景和边框 、文字特效 、多栏布局等。

一、圆角边框与阴影

1.1 圆角边框 boder-radius

boder-radius属性含水平值和垂直值

属性	意义
boder-top-left-radius	左上角的形状
boder-top-right-radius	右上角的形状
boder-bottom-left-radius	左下角的形状
boder-bottom-right-radius	右下角的形状

案例：

1.2 阴影 box-shadow

属性基本语法：
box-shadow: (inset/outset) 水平偏移 垂直偏移 模糊距离 颜色;

inset : 可选，内部阴影

div{
	width: 300px;
	height: 100px;
	background: #f90;
	box-shadow: inset 10px 10px 5px #888;
}

效果：

---

outset : 默认值，外部阴影

div{
	width: 300px;
	height: 100px;
	background: #f90;
	box-shadow: 10px 10px 5px #888;
}

效果：

二、文字与文本

2.1 text-shadow属性

属性基本语法：
text-shadow: 水平偏移 垂直偏移 阴影大小 颜色;

案例：

2.2 word-wrap属性

允许长单词、URL强制进行换行

三、2D转换

2D转换的方法有：
对元素进行旋转、缩放、移动、拉伸

3.1 旋转 transform:rotate()

属性基本语法：
transform:rotate( 旋转度数 );

案例：

3.2 缩放 transform:scale()

属性基本语法：
transform:scale(x,y);
x：水平方向缩放的倍数
y： 垂直方向缩放的倍数

倍数：0~1表示缩小，>1表示放大

案例：

四、过渡与动画

4.1 过渡 transition属性

将元素中的某个属性从“一个值”在指定时间内过渡到“另一个值”。

属性的基本语法：
transition: 属性名 过渡时间 过渡方法;

transition-property: 属性名| all（对哪个属性进行变化）

transition-duration: 持续时间;

transition-timing-function: 过渡使用的方法（函数）;
transition-timing-function属性取值：

值	描述
linear	匀速
ease	慢快慢
ease-in	慢快
ease-out	快慢
ease-in-out	慢快慢

案例：

4.2 动画 animation属性

（一）定义动画：@keyframes规则
（二）调用动画：animation属性

animation属性取值：

值	描述
animation	简写
animation-name	引用@keyframes定义的动画名称
animation-duration	动画完成时间
animation-timing-function	规定动画的时间曲线。默认是"ease"
animation-play-state	running/paused

案例：

五、3D转换

3D —> transform-style: preserve-3d;

5.1 3D旋转

rotateX(角度deg);
rotateY(角度deg);
rotateZ(角度deg);

三个属性的旋转方向：

5.2 透视 perspective属性

即眼睛到舞台的距离

属性基本语法：
perspective: 100px;

无透视状态下旋转：

有透视状态下（下图右侧的青蛙）旋转：

---

写在最后：新手上路，如有问题，欢迎大家指出，给意见。如果这篇文章对你有帮助，麻烦帮忙点一下赞，你们小小的举动能给我无限大的动力。拒绝白嫖，从我做起，从现在做起。Thank you for watching!