[css3]知识点(自己总结版)


CSS3是一个包含多方面的知识,主要分两大类,一类是在css2基层上改进的,另一类是完全新增的

批注:这里只是提纲,具体知识点可参考:http://zccst.iteye.com/blog/2192532

首先是媒体查询,这个是入口

@media screen and (min-width:400px)

一、在原有基础上改进和升级

1,盒模型

box-sizing: border-box / content-box

display: table / table-cell / box

    table/table-cell与vertical-align=midden用来布局垂直居中的(同top:50%,left:50%,translate:-50% -50%;)

    box相关的有display:box, box-pack(对齐),box-align,box-flex(子元素伸缩)

background: 

    background-clip(裁剪区域),

    background-origin(对齐参考区域),

    background-size(尺寸大小)

border-radius:   border-top-left-radius:100%;

border-shadow:

border-image:

2,文本、列表、表格等HTML元素增强

text-overflow:

text-shadow:

3,增强类选择器

[class=””]

nth-child(n)

:first

:last

::before

::after

二、全新的

1,线性渐变,用于增强网页效果,不需要背景图片了

gradient  n.  倾斜度, 升降率, 坡度  adj. 倾斜的;步行的

短语  pressure gradient 气压梯度  temperature gradient 温度梯度

(1)线性渐变

background: linear-gradient(direction, color-stop1, color-stop2, …);

默认是从上到下:{height: 200px;background: -webkit-linear-gradient(red, blue);}

还可以从左到右:background: -webkit-linear-gradient(left, red , blue);

还可以对角线Diagonal:background: -webkit-linear-gradient(left top, red , blue);

旋转角度:background: -webkit-linear-gradient(180deg, red, blue);

background: -webkit-linear-gradient(red, green, blue);

http://www.w3cplus.com/css3/new-css3-linear-gradient.html

(2)圆形渐变

2,动画,用来取代Flash效果的

(1) transform  对元素进行旋转、缩放、移动或倾斜

例如:transform: translate(50px,100px);//打开时已经到坐标(50px,100px)

rotate 沿X,Y,Z轴旋转,其中Z适合用来loading

scale(x,y) 缩放,沿X轴缩放x倍,沿Y轴缩放y倍。

skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。

(2) transition  过渡是元素从一种样式逐渐改变为另一种的效果。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。

例如:transition: width 2s;

(3) animation  , keyframes

-webkit-animation-name: refreshing;

-webkit-animation-duration: 0.7s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: linear;

animation-delay  在动画开始之前的延迟

animation-direction是否应该轮流反向播放动画。

@keyframes myfirst {

  from {background: red;}

  to {background: yellow;}

}

3,


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>