CSS3--学习第一天

1.text-shadow

text-shadow:1px  1px 1px #ccc,
　　　　　0 0 10px #fff,
　　　　　0 0 20px #fff,
	0 0 30px #fff,
	0 0 40px #ff00de,
	0 0 70px #ff00de,
	0 0 80px #ff00de,
	0 0 100px #ff00de,
	0 0 150px #ff00de;

2.transform-style

/*允许子元素具有3d效果*/
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;

3.animation

animation:run ease-in-out 9s infinite;
-webkit-animation:run ease-in-out 9s infinite;
-moz-animation:run ease-in-out 9s infinite;
-ms-animation:run ease-in-out 9s infinite;
-o-animation:run ease-in-out 9s infinite;

4.keyframes 关键帧动画

@keyframes run {
	0%{
		transform:rotateX(-5deg) rotateY(0);
	}
	50%{
		transform: rotateX(0) rotateY(180deg);
		text-shadow:1px  1px 1px #ccc,
			    0 0 10px #fff,
			    0 0 20px #fff,
			    0 0 30px #fff,
			    0 0 40px #3EFF3E,
			    0 0 70px #3EFFff,
			    0 0 80px #3EFFff,
			    0 0 100px #3EFFee,
			    0 0 150px #3EFFee;
	}
	100%{
		transform:rotateX(5deg) rotateY(360deg);
	}
}

5.transform

　　常用的有:rotate() 旋转  translate() 移动  scale()缩放

 6.border-image

       border-image:url("")  70  repeat/round/stretch

 7.linear-gradient

      linear-gradient(to 方向,颜色,颜色);

　例如:linear-gradient(to top left ,red,blue);　

 8.@font-face

　　@font-face {
　　　　font-family: "MOOC Font";
　　　　src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
　　}

9.background-origin    ---background要设置no-repeat;设置才会有效果,否则直接从border-box展示

background-origin ： border-box | padding-box | content-box;

10.background-clip    

background-clip:border-box | padding-box | content-box

11.多个背景图片设置

background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
background-position: left top, 100px 0, 200px 0;
background-repeat: no-repeat, no-repeat, no-repeat;

12.:not

div:not([id="footer"]){
background: orange;

}