css3整理

零.line-height

一.!important提高css优先级

http://www.cnblogs.com/yudy/archive/2013/05/27/3102825.html

 

二.:before

/*在元素之前插入*/

h2:before{

/*内容*/

    content: 'COLUMN';

    color: white;

    background-color: orange;

    font-family: 'Comic Sans MS', Helvetica,sans-serif;

    padding: 1px 5px;

    margin-right: 10px;

}

//在元素之后插入图片

h1.new:after{

    content:url(new.gif);

}

 

三.盒子

block:元素宽度占满整个浏览器,每一行只允许一个block元素

inline:元素宽度等于其内容所在宽度,每一行可并列容纳多个inline元素

inline-block:属于block类型盒子的一种,但是显示时具有inline盒子特点,并排时元素默认底部对齐

 

//行内块显示.这两个div会显示在一行,且默认底部对齐

div#a,div#b{

display:inline-block;

//指定行内块为顶部对齐

vertical-align: top;

}

a{

//不显示

display:none;

}

overflow:hidden;

overflow:scroll;

overflow:auto;

 

盒子阴影

-webkit-box-shadow:10px 10px 10px gray;

阴影离开文字的 横向距离,纵向距离,阴影模糊半径,color为阴影颜色

 

-webkit-box-shadow:10px 10px 0 gray

-webkit-box-shadow:-10px -10px 0 gray:向左,向上 模糊半径0 画阴影

-webkit-box-shadow:0 0 50px gray

 

盒子大小

box-sizing:可以指定width和height属性分别指定的宽度和高度值是否包含元素的padding,border,margin.即width是只包含内容,还是包含内容+padding,还是包含内容+padding+border等

即box-sizing默认是内容宽度.即width=300指定的是盒子中内容的宽度

box-sizing可以指定的属性包括content-box(默认),border-box

 

box-sizing:content-box;

 

指定width=300为盒子总宽度,包括内边距+内容宽+边框宽

box-sizing:border-box;

 

//指定div宽度为50%,一定能使得两个div并排

        width: 50%;

        border: solid 30px #ffaa00;

        padding: 30px;

        background-color: #ffff00;

        float: left;

        -moz-box-sizing: border-box;

        -webkit-box-sizing: border-box;

        -ms-box-sizing: border-box;

        box-sizing: border-box;

 

四.背景

1.background-clip

背景从内部一直显示到边框

background-clip:border;

显示到内边距

background-clip:padding;

 

背景大小(保持宽高比)

background-size:auto 20px;

 

background-origin:背景从左上角的border,padding或content开始绘制

 

显示多张背景图片

div{

       background-image:url(flower-red.png), url(flower-  green.png),url(sky.jpg);

        background-repeat: no-repeat, repeat-x,no-repeat;

        background-position: 3% 98%,85%, centercenter,  top;       

        width: 300px;       

        padding: 90px 0px;

}

 

圆角矩形

-webkit-border-radius:20px;

border:none;

指定圆角矩形不同角的半径

-webkit-border-top-left-radius:10px;

-webkit-border-top-right-radius:20px;

-webkit-border-bottom-right-radius:30px;

-webkit-border-bottom-left-radius:40px;

 

边框图片:中间透明 自动分为九块

-webkit-border-image:url(borderimage.png) 20 20 20 20 / 20px;

 

五.变形

transform:实现文字或图像的变形处理:包括旋转,缩放,倾斜,移动

 

六.动画

transition:平滑过渡

animation:关键帧过渡

1.在hover时颜色改变,加上

变换background-color属性

        -webkit-transition: background-color 1slinear;

 

后颜色会线性渐变

div{

        background-color: #ffff00;

        -webkit-transition: background-color 1slinear;

        -moz-transition: background-color 1slinear;

        -o-transition: background-color 1slinear;

}

div:hover{

        background-color: #00ffff;

}

 

2.在hover时改变过个值

-webkit-transition:

background-color1s linear,

color 1slinear, width 1s linear;

 

3.animation

div{

    background-color: red;

}

//指定关键帧

@-webkit-keyframesmycolor{

    0%{

           background-color: red;

    }

    40%{

            background-color: darkblue;

    }

    70%{

            background-color: yellow;

    }

    100%{

            background-color: red;

    }

}

div:hover{

//使用关键帧

        -webkit-animation-name: mycolor;

        -webkit-animation-duration: 5s;

        -webkit-animation-timing-function:linear;

}