css3的基础

css3

css3是css2的升级，相较于css2多了动画，2D/3D的转化，这是两者最大的区别

一、css3边框(border)

1、border-radius 圆角

div
{
border:2px solid;
border-radius:25px;
} 

也可对四个角设定不同的值，例如;
border-radius: 10px 20px 30px 40px;
border-radius: 10px 20px 30px;
也可以单独对某一个角设角度,例如:
border-bottom-left-radius: 20px;

2、box-shadow 阴影

div
{
	width:300px;
	height:100px;
	background-color:yellow;
	box-shadow: 10px 10px 50px #888888 inset;
}

其中box-shadow后的第一个和第二值分别为阴影的相对左右和上下的位置，为0 0时可以不带单位px，此时阴影在正后方，其余数值必须带单位，第三个数值的意义是阴影的扩散范围。inset是将阴影设置成向内扩散。

3、border-image 边框图片

div
{
border-image:url(border.png) 30 30 round;
} 

其中：round 指图像平铺（重复）来填充该区域；stretch 指图像被拉伸以填充该区域

二、css3背景

1、background-size

指定背景图像的大小
自定义大小：

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
} 

伸展背景图像完全填充内容区域：

div
{
background:url(img_flwr.gif);
background-size:100% 100%;
background-repeat:no-repeat;
} 

2、background-origin

指定背景图像的位置区域，content-box, padding-box,和 border-box区域内可以放置背景图像。
例：在content-box中放入背景图片

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-origin:content-box;
} 

注：css3中可以添加多个背景图像
属性：
background-clip 规定背景的绘制区域。
background-origin 规定背景图片的定位区域。
background-size 规定背景图片的尺寸

三、css3渐变

1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

格式 ：background: linear-gradient(direction, color-stop1, color-stop2, …);
分别方向（默认从上到下），颜色1，颜色2。。。
也可以定义一个角度，而不用预定义方向（如to bottom、to top、to right、to left、to bottom right，等等）。
也可以使用角度来控制渐变方向
逆时针方向计算，0deg 是从下到上的渐变，90deg是从左到右的渐变。
格式：background: linear-gradient(angle, color-stop1, color-stop2);

同时当指定颜色的百分比时，颜色是不均匀分布，即按照百分比分布。未指定时均匀分布
使用透明度（Transparency）：
rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。

#grad1 {
	height: 200px;
    background-image: linear-gradient(to right, rgba(255,0,0,1), rgba(266,0,0,0));
}
1

repeating-linear-gradient() 函数用于重复线性渐变
格式：background: repeating-linear-gradient(red, yellow 10%, green 20%);

2、径向渐变（Radial Gradients）- 由它们的中心定义

格式：background: radial-gradient(center, shape size, start-color, …, last-color);
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

closest-side:半径为从圆心到最近边
closest-corner:半径为从圆心到最近角
farthest-side:半径为从圆心到最远边
farthest-corner:半径为从圆心到最远角

四、css3的文本效果

1 text-shadow 文本阴影

格式样例：
h1
{
text-shadow: 10px 5px 50px #FF0000;
}
其中第一个值和第二个值分别是阴影的相对左右和上下的位置，第三个值是阴影扩散范围

2、word-wrap 换行

格式： word-wrap:break-word;
自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字，即将单词强行断开
break-all 截断换行
keep-all 全单词换行
单行溢出省略语句 ：

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

多行溢出省略

display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp:3;
-webkit-box-orient: vertical;

五、css的2D转换transform

1、ranslate() 平移

translate() 默认x
translatex(100px)
translatey(100px)
translatez(100px)
translate3d(100px,20px,0)

2、rotate() 旋转

正数时顺时针旋转，负数时逆时针
rotate z 默认
rotatex
rotatey
rotatez

3、scale() 缩放

scale
scale(1)
scale(1,2)

4、skew() 拉伸

skew
skew(45deg,10deg)
skewx(45deg)
skewy(45deg)

5、matrix() 合并属性，有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

六、css3的3D转换

transform-style:preserve-3d;（将2d转化为三维）
transform: rotate3d(0,1,0,180deg);前三个值 为0不转,为1时旋转
rotateX()方法，围绕其在一个给定度数X轴旋转
rotateY()方法，围绕其在一个给定度数Y轴旋转。

七、css3的过渡

要实现这一点，必须规定两项内容：添加效果的CSS属性和效果的持续时间。

/*设置过渡延迟*/
transition-delay: 1s;
/*设置过渡的时间*/
 transition-duration: 2s;
/*设置过渡属性  如果过渡的属性比较多  其他的一样 可以写成all  也可以使用逗号连写*/
 transition-property: text-shadow;
/*设置动画的方式  linear  ease  ease-in  ease-out ease-in-out*/
transition-timing-function:linear;
/* transition:text-shadow .5s linear,font-size .5s ease-in;*/
transition:all .5s linear;

八、css3动画

必须定义动画名称和动画的持续时间。如果省略的持续时间，动画将无法运行，因为默认值是0。
两种形式：

1、from to

例：

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
}

@keyframes myfirst
{
	from {background:red;}
	to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	from {background:red;}
	to {background:yellow;}
}

2、 0% 100%

例

div
{
	width:100px;
	height:100px;
	background:red;
	animation:myfirst 5s;
	-moz-animation:myfirst 5s; /* Firefox */
	-webkit-animation:myfirst 5s; /* Safari and Chrome */
	-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-moz-keyframes myfirst /* Firefox */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}

@-o-keyframes myfirst /* Opera */
{
	0%   {background:red;}
	25%  {background:yellow;}
	50%  {background:blue;}
	100% {background:green;}
}