web前端CSS3

border-radius属性:
border-top-left-radius:左上角形状
border-top-right-radius:右上角形状
border-bottom-left-radius:左下角形状
brder-bottom-right-radius:右下角形状

border-top-left-radius:40px 20px//第一个参数为x长度,第二个为y长度
border-bottom-right-radius:20px
border-radius:25px//四个角的x，y长度都为25

box-shadow属性:
inset:水平偏移 垂直偏移 模糊距离 颜色
inset:内部阴影
outset:外部阴影(默认)

box-shadow:10px 10px 5px grey//第一个为水平距离，第二个参数为垂直距离(可负),第三为模糊范围

文本和文字属性:
text-shadow:

text-shadow:2px 2px red
text-shadow:2px 2px 5px red//阴影大小可以省略

word-wrap:normal/break-word(可以将长单词拆分分成几行存在文本域内)
@font-face:

字体转换为格式网站:htt[?/www/fontsquirrel.com/tools/wevfont-

@font-face{
font-family:newName//定义姓名字
	  src:url('fonts/name.ttf'),
	  url('fonts/name.eot),
	  url('fonts/name.woff'),
	  url('fonts/name.svg')
}
p{
	font-family:newName;
}

//实例
	@font-face{
			font-family: '字美凌风少年体';
			src: url("font/字美临风少年体.svg") format("svg"),
				 url("font/字美临风少年体.ttf") format("ttf"),
				 url("font/字美临风少年体.woff") format("woff");
			font-weight: normal;
			font-style: normal;
		}
		p{
			font-family: "字美临风少年体";
		}

transform属性:
2D转换方法:对元素进行旋转,缩放,移动,拉伸
rotate(deg)//旋转函数
scale(x,y)//缩放函数，x，y小于0大于1

#rotateDiv
{
	transform:rotate(30deg)//顺时针旋转30°
}
.box:hover{
	transform:scale(1.2)
}

transition和animation属性:
transition:将元素的某个属性从一个值在指定的时间内过渡到另一个值
transition-preperty:属性名(有多个属性用逗号隔开,所有属性用all)
transition-duration:过渡时间
transition-timing-functi(过渡使用的方法(函数):
linear(匀速)
ease(慢快慢)
ease-in(慢快)
ease-out(快慢)
ease-in-out(慢快慢)

transition:all  1s linear

animation：
1.定义动画(@keyframes规则)
2.调用动画
animation
animation-name:动画名字
animation-duation:动画完成时间
animation-timing-function:规定动画的速度
animation-play-state:running|paused

@keyframes mycolor//mycolor为动画名字
{
	0% {background-color:red;}
	30% {background-color:blue;}
	60% {background-color:yellow;}
	100% {background-color:green;}
]
div:hover
{
	animation:mycolor 5s linear;
}

3D变换:
设置3D变换:transform-style:preserve-3d

rotateX(deg)
rotateY(deg)
rotateZ(deg)

-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);

透视:
perspective属性:透视，perspective的设置要放在舞台上