前端复习之旅--CSS3

响应式布局

媒体查询：

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

flex布局：

display：flex；

flex-direction：row/column；

justify-content：flex-start | flex-end | center | space-between | space-around；

align-items: flex-start | flex-end | center | baseline | stretch；

flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit;

order: 1;//排序

grid布局：

display: grid;

grid-template-rows: repeat(2, minmax(0, 1fr));//两列

grid-gap: 50px;//间隙

.item1 { grid-column-start: 1; grid-column-end: 3; }//网格线从第一列开始，第三列结束：

.item1 { grid-row-start: 1; grid-row-end: 3; }//网格线从第一行开始，第三行结束

动画

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

关键词 "from" 和 "to"，等同于 0% 和 100%。

过渡

div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}

注意： 如果未指定的期限，transition将没有任何效果，因为默认值是0。

div
{
    transition-property: width;//使用css过度属性的名称
    transition-duration: 1s;//过渡效果花费的时间
    transition-timing-function: linear;//过渡效果的时间曲线。默认是 "ease"
    transition-delay: 2s;//过渡效果何时开始
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
}

/*简写：*/

div
{
    transition: width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

背景

多重背景，用逗号隔开，所有的图片中显示在最顶端的为第一张。

#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}

渐变

• 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
• 径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变从上到下：background-image: linear-gradient(red , yellow);

线性渐变从左到右：background-image: linear-gradient(to right, red , yellow);

线性渐变用角度：background-image: linear-gradient(-90deg, red, yellow);

可带透明度：background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

径向渐变：background-image: radial-gradient(red 5%, yellow 15%, green 60%);

边框 

圆角border-radius:

盒阴影：box-shadow: 10px 10px 5px #888888;

边界图片：

div
{
border-image:url(border.png) 30 30 round;
-webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

文本效果

阴影 text-shadow: 5px 5px 5px #FF0000;//水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：

溢出 overflow: hidden; text-overflow: ellipsis;

字体

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight:bold;
}

2D/3D转换（transform）

2D：

• translate() 平移：translate(50px,100px)；
• rotate() 旋转：rotate(30deg);
• scale() 放大或缩小：scale(2,3)
• skew() 倾斜：skew(30deg,20deg)
• matrix() 合并：有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。

以上除了旋转和合并，都可以拆成X(),Y()，例如：scaleX(n)，scaleY(n)。

3D：

在2D的基础上加上Z()。