CSS3 边框 背景 渐变 文本属性 2D转换 动画

CSS3

1、css用于控制网页的样式和布局。CSS3是最新的CSS标准
2、相较于CSS2，增加了新特性
		1）减少开发成本与维护成本
		2）提高页面性能
3、CSS3将完全向后兼容

CSS3边框属性

border

border-radius创建圆角

border-radius:20px,10px,30px,10px;
四个值：左上角，右上角，右下角，左下角
三个值：左上角，右上角和左下角，右下角
两个值：左上角与右下角，右上角与左下角
一个值：四个圆角值相同
遵循对角线原则。
使用border-radius制作特殊图形
		1、圆形
				要求：元素的宽度和高度必须一样，圆角的半径为元素宽度的一半，或者直接设置圆角半径值为50%

box-shadow添加阴影

语法：box-shadow:h-shadow v-shadow blur apread color inset;
h-shadow----水平阴影的位置
v-shadow----垂直阴影的位置
blur------------模糊距离
spread---------阴影的大小
inset------------阴影类型内阴影

border-image使用图像创建一个边框

CSS3背景属性

background-size尺寸

说明：规定背景图片的尺寸

background-origin定位区域

说明：规定背景图片的定位区域

backgroun-clip绘制区域

说明：规定背景图片的绘制区域

CSS3渐变

说明：可以让你在两个或多个指定的颜色之间显示平稳的过渡

线性渐变（Linear Gradients）

1、颜色沿着一条直线过渡：从左到右、从右到左、从上到下、对角方向等
2、要创建线性渐变，必须至少定义两种颜色节点。也可设置一个起点和一个方向（或一个角度）
background-image：linear-gradient(...)
语法：linear-gradient(position,color1,color2,...)
支持透明度：rgba()函数：最后一个参数可以从0到1的值，它定义了颜色的透明度

径向渐变（Radial Gradients）

1、径向渐变有它的中心定义
2、要创建径向渐变，必须至少定义两种颜色节点
3、默认渐变的中心是中心店，渐变的形状是椭圆
background-image：radial-gradient(...)
语法：radial-gradient（center,shape size,start-color,...,last-color）;

CSS3文本属性

text-shadow

想文本添加阴影

text-overflow

1、当文本溢出包含元素时发生的事情
2、超出部分显示省略号
		1）white-space:nowrap     文本不会换行，在同一行继续
		2）overflow:hidden      溢出隐藏
		3）text-overflow:ellipsis  用省略号来代替被修改的文本

CSS3字体

语法：@font-face{
		font-family:必须。规定字体的名称
		src:必需。定义字体文件的URL
		font-weight:可选。定义字体的粗细。默认是normal
		font-style:可选。定义字体的样式。默认是normal
}

2D转换方法

1、CSS3转换是有一些效果的集合
		如平移、旋转、缩放、倾斜效果
2、每个效果都可以称为转换或变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
语法：translate:[ transform-function ];
1)translate(x,y)：平移函数
		translateX(x);translateY(y);
2)scale(横向缩放比例,纵向缩放比例)：缩放函数
3）rotate(相对原来中心顺时针旋转角度)：旋转函数
4）skew(水平方向倾斜的角度，垂直方向倾斜的角度)：倾斜函数【deg度】

CSS3 过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
语法：transition：[transition-property transition-duration transition-timing-function transition-delay]
1、过渡属性（transition-property）
		定义转换动画的CSS属性名称
		property：指定的CSS属性（width、height、background-color属性等）
		all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
2、过渡所需要的时间（transition-duration）
		定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
3、过渡动画函数（transition-timing-function）
		指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
4、过渡延迟时间（transition-delay）
		指定一个动画开始执行的时间，当改变元素属性值后多长时间去执行过渡效果
				正值：元素过渡效果不会立即出发，当过来了设置的时间值后才会被触发
				0：默认值，立即执行

CSS动画

animation动画简介
	animation实现动画主要由两个部分组成
		通过类似Flash动画的关键帧来声明一个动画
		在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

1、设置关键帧
语法：@keyframes animationname{
from{/CSS样式写在这里/}
percentage{/CSS样式写在这里/}
to{/CSS样式写在这里/}
}
例：
@keyframes spread{
0%{width:0;}
33%{width:23px;}
66%{width:46px;}
100%{width:69px;}
}
2、调用关键帧