CSS3总结

发布时间：2019-08-25 09:33:22编辑：auto阅读（1183）

 

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;

关键字：