CSS3总结
CSS3总结
一、选择器
1.通用选择器
E~F:E后边所有和E同级的F
2.属性选择器
E[att^=’val’]：att属性中以val开头的
E[att$=’val’]:以val结尾的
E[att*=’val’]含有val的选择器
3.伪类选择器
E:nth-child(n)：选中E的父亲的第n个孩子并且该孩子必须是E否则选不中
E:nth-of-type(n)：选中所有的E再从中选出第N个E
二、圆角、边框、阴影
1.圆角
border-radius：10px 10px 10px 10px/10px 10px 10px 10px
2.边框
border-p_w_picpath:url() (10% 10% 10% 10%|10 10 10 10) (stretch | repeat | round)
3.阴影
text-shadow:水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，
水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba)，
水平偏移量 垂直偏移量 阴影模糊值 颜色(rgba);
box-shadow:水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)，
水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba)，
水平偏移量 垂直偏移量 阴影模糊值 阴影外延值 颜色(rgba);
三、背景、蒙版
1.背景
background-clip:border-box | padding-box | content-box;
background-origin:border-box | padding-box | content-box;
Background-size:length： 100px 500px 水平 竖直长度值指定 percentage： 百分比指定 auto： 真实大小 cover：等比缩放到完全覆盖容器，背景图像有可能超出容器 contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内
2.渐变
一般要写在背景或者蒙版里
background：-webkit-linear-gradient(top,red 0%,blue 100%);
-webkit-mask-p_w_picpath:-webkit-radial-gradient(50% 50px,red 0%,blue 100%);
3.蒙版
-webkit-mask-p_w_picpath:url()|gradient(rgba(0,0,0,1));
-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat;
-webkit-mask-position:x y;
-webkit-mask-origin:border|padding|content;
-webkit-mask-clip:border|padding|content;
4.文字渐变
color:rgba(0,0,0,0);
background:-webkit-linear-gradient(top,red 0%,blue 100%);
-webkit-background-clip:text;
四、变形倒影
1.倒影
-webkit-box-reflect: below 5px -webkit-linear-gradient(right,rgba(0,0,0,0) 20%,rgba(0,0,0,1) 100%);
2.变形
-webkit-transform-origin: [percentage | length | left | center | right] [percentage | length | top | center | bottom];
-webkit-transform: rotate(30deg) translate(xpx,ypx) scale(x,y) skew(x,y);
五、分栏自适应
1.分栏
column-count:number;
column-gap:5px;
Column-width:10px;
column-rule : 宽度，颜色; 类似border
column-rule-style : dotted
2.自适应
display : box； 定义子元素内容的呈现形式
-webkit-box-orient：horizontal | vertical | inline-axis | block-axis | inherit
子元素的排列方式（横向或者竖向）
-webkit-box-direction：normal | reverse | inherit
子元素的排列顺序
-webkit-box-flex:分配剩余空间
box-ordinal-group：子元素显示顺序
属性：
box-align：子元素的垂直对齐方式
start | end | center | baseline | stretch
box-pack：子元素的水平对齐方式
start | end | center | justify
属性“box-pack”管理水平方向上的空间分布，有以下四个可能属性：start、end、 justify、 or center。
start 所有盒子在父盒子的左侧，余下的空间在右侧；
end所有盒子在父盒子的右侧，余下的空间在左侧；
justify 余下的空间在盒子间平均分配；
center 可利用的空间在父盒子的两侧平均分配。
属性“box- align”管理垂直方向上的空间分布，有以下五个可能属性之：start、 end,、center、 baseline和 stretch。
start 每个盒子沿父盒子的上边缘排列，余下的空间位于底部；
end 每个盒子沿父盒子的下边缘排列，余下的空间位于顶部；
center 可用空间平均分配，上面一半，下面一半；
baseline 所有盒子沿着它们的基线排列，余下的空间可前可后；
stretch 每个盒子的高度调整到适合父盒子的高度
六、过渡
-webkit-transition:all 5s ease-in 5s;
transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ] 默认值：看每个独立属性
取值
[ transition-property ]： 检索或设置对象中的参与过渡的属性 [ transition-duration ]： 检索或设置对象过渡的持续时间 [ transition-timing-function ]： 检索或设置对象中过渡的动画类型 [ transition-delay ]： 检索或设置对象延迟过渡的时间
七、动画
视角：-webkit-perspective:500px;
看的位置：-webkit-perspective-origin: 50% 100px;
-webkit-animation:a1 3s ease-in;
-webkit-animation-direction:alternate;
-webkit-animation-iteration-count:infinite;
@-webkit-keyframes a1{
from{}
%{}
to{}
}
3D命令
-webkit-backface-visibility:hidden;
-webkit-transform-style:preserve-3d;