CSS3学习笔记

CSS3与CSS不同之处之一是CSS3需要考虑浏览器兼容问题。因此，部分属性需要在前面添加如下字符：

-ms-       //IE9

-webkit-  //Chrome and Safari

-moz-     //Firefox

-o-         //Opera

 

一  边框、背景与文本效果

#d2 {

    -webkit-transform: rotate(30deg); /*以重心为中点顺时针旋转30度以后*/

    border-radius: 20px; /*圆角矩形。20是圆的半径*/

    -webkit-box-shadow: 30px 30px 5px #000; /*四个参数分别表示左偏移量，上偏移量，模糊程度，阴影颜色*/

    -webkit-background-size: 63px 100px; /*背景尺寸（宽，高）*/

    background-origin: border-box; /*值域里还有padding-box和content-box，分别表示从外到内三层的边缘开始铺设背景图片。*/

    text-shadow: 5px 5px 5px #FF0000; /*四个参数同box-shadow的*/

    word-wrap: break-word; /*长单词强制换行*/

}

注：本人使用的是Chrome浏览器，因此部分属性前面加的是-webkit-。

 

二  字体

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。通过 CSS3，web 设计师可以使用他们喜欢的任意字体。当您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

在@font-face规则中，首先定义字体名称。

@font-face {

    font-family: MyFirstFont;/*规定字体名称*/

    src: url('font/Sansation_Light.ttf');/*字体的服务器地址*/

}



#q {

    font-family: MyFirstFont;

    width: 10px;

    height: 20px;

}

 

三  2D转换

#q {

    width: 10px;

    height: 20px;

}



#q #div {

    -webkit-transform: translate(50px, 100px); /*相对于id=q的元素移动的位置*/

    -webkit-transform: scale(2, 4); /*放大尺寸倍数*/

    -webkit-transform: skew(30deg, 20deg); /*X、Y轴翻转角度*/

    -webkit-transform: matrix(0.866, 0.5, -0.5, 0.866, 0, 0);

    /*matrix() 方法把所有 2D 转换方法组合在一起。

    matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。*/

}

 

四  3D转换

3D变换就是把2D的属性后面加上XYZ，如果三维都有变换，就在后面加3d。

例如：transform: rotateX(120deg);就是以X轴方向选择120°。

 

五  过渡

#at {

    width: 100px;

    height: 100px;

    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /*变化所需时间。添加-webkit-transform是为了使文字也跟着变化2s，如果没有添加这个值，文字会直接变成如结果所示*/

}



#at:hover {

    width: 300px;

    height: 300px;

    -webkit-transform: rotate(180deg); /*id=at的元素顺时针选择180°。当指针移除元素时，元素图像恢复原状。*/

}



#w {

    width: 100px;

    height: 100px;

    background: yellow;

    -webkit-transition-property: width;/*过渡的属性名称。*/

    -webkit-transition-duration: 1s; /*过渡持续时间。*/

    -webkit-transition-timing-function: linear; /*过渡时间曲线，这里是匀速过渡。*/

    -webkit-transition-delay: 2s; /*延迟时间。*/

    -webkit-transition: width 1s linear 2s;/*这行是从-webkit-transition-property至-webkit-transition-delay四行的简写。*/

}

 

六  动画

在@keyframes规则中，首先定义动画效果名称。

@-webkit-keyframes myfirst {

    from {

        background: yellow;

    }

    to {

        background: blue;

    }

}



#d {

    -webkit-animation: myfirst 5s; /*产生动画*/

}

以上代码会产生从黄色过渡到蓝色，时间为5秒的动画。

可以用百分比来规定动画产生的时间。上个例子中的from 和 to相当于0%和100%。

@-webkit-keyframes mysecond {

    0% {

        background: red;

    }

    25% {

        background: yellow;

    }

    50% {

        background: blue;

    }

    100% {

        background: green;

    }

}



#d {

    -webkit-animation: mysecond 5s; /*产生动画*/

}

 

七  多列显示

.newspaper{

    -webkit-column-count:3; /* 3列显示 */

    -webkit-column-gap:10px;/* 列间距 */

    -webkit-column-rule:4px outset #ff0000;/* 列之间的样式 */

}