css3笔记总结

css3 border

ps：ie9只支持border-radius和box-shadow
1.border-radius 增加圆角

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

2.box-shadow(参数：box-shadow: h-shadow v-shadowds blur阴影尺寸 spread color inset;)

div
{
box-shadow: 10px 10px 5px #888888;
}

3.border-image

div
{
border-image:url(border.png) 30 30 round;
-moz-border-image:url(border.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(border.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(border.png) 30 30 round; /* Opera */
}

css3 background

1.background-size(参数支持百分比，百分比是相对于父元素)

div
    {
    background:url(bg_flower.gif);
    -moz-background-size:63px 100px; /* 老版本的 Firefox */
    background-size:63px 100px;
    background-repeat:no-repeat;
    }

2.background-origin
可以放置在content-box、padding-box 或 border-box 区域

3.background-image 可以接多个url，实现img的重叠

css3 文本效果

1.text-shadow（text-shadow: h-shadow v-shadow blur color）

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

2.word-wrap（单词换行）

p {word-wrap:break-word;}

CSS3 @font-face

Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。

2d转换

• translate() 元素从其当前位置移动， left（x 坐标） 和 top（y 坐标）
• rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• scale() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
• skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• matrix() matrix() 方法把所有 2D 转换方法组合在一起

3d转换

• rotateX()

    div
    {
    transform: rotateX(120deg);
    -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
    -moz-transform: rotateX(120deg);    /* Firefox */
    }

• rotateY()

css3过渡

过渡
transition 简写属性，用于在一个属性中设置四个过渡属性。

div
{
transition: width 2s;
-moz-transition: width 2s;  /* Firefox 4 */
-webkit-transition: width 2s;   /* Safari 和 Chrome */
-o-transition: width 2s;    /* Opera */
}
div:hover
{
width:300px;
}

css3动画

@keyframes定义动画
animation 执行动画

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

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

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
-o-animation: myfirst 5s;   /* Opera */
}

css3多列

• column-count 创建的列数
• column-gap 列之间的间隔
• column-rule 列的规则

css3用户界面

• resize div由用户调节大小

    div
    {
    resize:both;
    overflow:auto;
    }

• box-sizing允许您以确切的方式定义适应某个区域的具体内容

    div
    {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box;  /* Safari */
    width:50%;
    float:left;
    }

• outline-offset 设定轮廓

    div
    {
    border:2px solid black;
    outline:2px solid red;
    outline-offset:15px;
    }