2018 Web 开发者最佳学习路线之CSS3“:first-child”选择器表示的是选择父元素的第一个子元素的元素E

圆角效果 border-radius

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
.box_shadow{
    box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

为边框应用图片 border-image

 border-image:url(borderimg.png) 70 repeat/round/stretch

CSS3颜色颜色之RGBA rgba(0,0,0,0.5)

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

text-overflow:ellipsis;//clip:剪切 ellipsis//省略号
overflow:hidden; 
white-space:nowrap;

嵌入字体@font-face

text-shadow: X-Offset Y-Offset blur color;
text-shadow: 0 1px 1px #fff

background-origin ： border-box | padding-box | content-box;
background-clip ： border-box | padding-box | content-box | no-clip
background-size: auto | <长度值> | <百分比> | cover | contain

CSS3背景 multiple backgrounds

:not选择器称为否定选择器

:root选择器称为根选择器

“:first-child”选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。

“:last-child”选择器与“:first-child”选择器作用类似，不同的是“:last-child”选择器选择的是元素的最后一个子元素。

“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。

“:nth-last-child(n)”选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。

“:first-of-type”选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。

“:nth-of-type(n)”选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。

“:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。

“:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，

选择器 :enabled选择器

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动。

.clearfix::before,
.clearfix::after {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;}

CSS3练习题：https://www.imooc.com/code/1882

rotate/skew/scale/translate

.wrapper span {

display:block;//要设置才生效

transform:rotate(20deg); }

skew skewX skewY

scale(X,Y) scaleX scaleY

translate(x,y)水平方向和垂直方向同时移动

矩阵 matrix() :http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

transition-property:指定过渡或动态模拟的CSS属性

transition-duration:指定完成过渡所需的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

@keyframes changecolor

div:hover { animation: changecolor 5s ease-out .2s; }

animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite;

animation-play-state 其主要有两个值：running和paused。

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。

columns：<column-width> || <column-count>
column-width: auto | <length>column-count：auto | <integer>

column-gap主要用来设置列与列之间的间距

.flexcontainer{ display: -webkit-flex; display: flex; }

@media screen {
   选择器{/*你的样式代码写在这里…*/}
}

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}
@media screen and (min-width:900px){
.wrapper{width: 980px;}
}

<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />

resize: none | both | horizontal | vertical | inherit

--<<CSS世界>>