css3 学习小结

**css3 学习小结**

1.CSS3 边框
border-radius
border-radius:5px;-webkit-border-radius:5px;
box-shadow
box-shadow:3px 3px 3px #ccc;
border-image
其中有两个参数  一个是round案例如下：
border-image:url(../images/1.png) 30 30 round;
-moz-border-image:url(../images/1.png) 30 30 round; /* 老的 Firefox */
-webkit-border-image:url(../images/1.png) 30 30 round; /* Safari 和 Chrome */
-o-border-image:url(../images/1.png) 30 30 round;/* Opera */

其中有两个参数  另一个是stretch案例如下(格式如上)：
border-image:url(../image/1.png) 30 30 stretch;
2.CSS3 背景
background-size
background-size:100% 100%;     //格式一
background-size:45px 45px;     //格式二
background:url(../image/1.png) no-repeat;
background-origin(规定背景图片的定位区域)
有三个值：content-box;padding-box;border-box;
background-origin:翻译出 来就是背景图片的起源：从内容部分起源；从内边距起源；从边框起源
background-image:url(bg_flower.gif),url(bg_flower_2.gif);  //可以个多张图片

3.CSS3 文本效果
text-shadow: 5px 5px 5px #FF0000; //CSS3 文本阴影
word-wrap:break-word              //CSS3 自动换行
text-align:justify;               //其他浏览器两端对齐
text-justify:inter-word;          //只在ie情况下两端对齐
text-overflow:ellipsis;           //马上溢出是用...省略文本  要结合：white-space:nowrap; width:12em; overflow:hidden;
word-break: break-all;            //通过使用 word-break 属性，可以让浏览器实现在任意位置的换行
word-wrap:break-word;             //word-wrap 属性允许长单词或 URL 地址换行到下一行。

4.CSS3 字体
<style>
@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div{font-family:myFirstFont;}
</style>

5.CSS3 2D 转换
translate()         //值 translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。
transform:translate(50px,100px);
-ms-transform:translate(360deg);    /* IE 9 */
-webkit-transform:translate(360deg);/* Safari and Chrome */
-o-transform: translate(30deg);     /* Opera */
-moz-transform: translate(30deg);
rotate()            //值 rotate(30deg) 把元素顺时针旋转 30 度。
transform: rotate(30deg);
-ms-transform:rotate(360deg);   /* IE 9 */
-webkit-transform:rotate(360deg);/* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);
scale()             //值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。
transform:scale(2,4);
-ms-transform:scale(2,4);
-webkit-transform:scale(2,4);
-o-transform:scale(2,4);
-moz-transform:scale(2,4);
skew()              //值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
matrix()
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);

5.CSS3 3D 转换
rotateX()
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */
rotateY()
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */

6.CSS3 过渡
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;

div
{
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;

简写成：transition: width 1s linear 2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari 和 Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

7.CSS3 动画
@keyframes myfirst{
form{background:red;}
to{background:yellow;}
}
@keyframes mysec{
0%  {background:red;}
25% {background:yellow;}
50% {background:pink;}
100% {background:black;}
}
.main{animation:myfirst 1s;}

{animation: myfirst 5s linear 2s infinite alternate;}

7.CSS3  多列
column-count
-moz-column-count:3;    /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
column-gap
-moz-column-gap:40px;       /* Firefox */
-webkit-column-gap:40px;    /* Safari 和 Chrome */
column-gap:40px;
column-rule
-moz-column-rule:3px outset #ff0000;    /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;

8.CSS3 用户界面
resize
resize:both;
overflow:auto;
box-sizing
border:1px solid #ccc
width:50%;
float:left;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box;  /* Safari */
outline-offset
border: 2px solid black;
outline: 2px solid red;
outline-offset: 15px;