css3新特性

css3选择器

1. 属性选择器
   p~ul 选择p之后的每一个ul
   ele[src^=val]
   ele[src*=val]
   ele[src$=val]
2. 结构伪类选择器
   p:first-of-type 选择每个p元素是其父元素第一个p的p
   p:last-of-type 选择每个p元素是其父元素最后一个p的p
   p:only-of-type 选择每个p是其父级唯一的p
   p:only-child 选择每个p 是其父元素唯一子元素
   p:nth-of-type(2) 选择每个p元素是其父元素第二个p的p
   p:nth-child(2) 选择每个p元素是其父元素第二个子元素的p
   :empty
   :root
   :target 选择当前活动的
3. 伪元素选择器
   ::selection

css3新特性

1.边框：
border-radius box-shadow border-image

2.背景：
background-image background-size background-clip

3.文本效果：
text-shadow
text-overflow:ellipsis
word-wrap:break-word

4.渐变：
background:linear-gradient(direction,color1,color2)
background:linear-gradient(to right,c1,c2)
background:radial-gradient()

5.2D转换：
transform:translate(x,y)（从左往右x,从上往下y）
transform:rotate(angle)（顺时针旋转）
transform:scale(a,b)(宽度变为a倍，长度变为b倍)
transform:skew(angle1,angle2)(倾斜)

6.3D转换：
增加了z轴

7.3D过渡：
transition:width 2s, height 2s, transform 2s;

8.动画：
@keyframes myfirst
{
from{background:blue;}
to{background:yellow;}
}
或者
@keyframes myfirst
{
25%{background:blue;}
50%{background:yellow;}
}
div{
animation: myfirst 5s;
}

9.column多列
column-count:被分割的列数
column-width
column-gap
column-fill

10.flex弹性盒子