CSS3 新特性实例制作

1.多栏布局

多栏布局只要在你想分栏的和子里写：

                                       -moz-column-count:2;/*分几栏*/
                                       -webkit-column-count:2;
                                       -moz-column-width:200px;/*每栏宽度*/
                                       -webkit-column-width:200px;
                                       -moz-column-gap:20px;/*设定多栏之间间隔*/
                                       -webkit-column-gap:20px;
                                       -moz-column-rule:1px solid red;/*设定多栏之间分隔线*/
                                       -webkit-column-rule:1px solid red;

（-moz-代表firefox浏览器私有属性）

（-webkit代表chrome、safari私有属性）

 

2.多背景图效果

多背景图效果，说白了其实就是在一个页面或者盒子了插入多个背景图片：

方法如下：.bg{
                           background:url(images/bg2.jpg) top right no-repeat,
                           url(images/bg3.jpg) bottom right no-repeat,
                           url(images/bg4.jpg) bottom left no-repeat;
                           }

 

插入多张图片，用“，”将多个图片隔开。

 

3.文字阴影效果

div{font-size:40px; font-family:"微软雅黑"; text-shadow:2px 3px 4px  5px #006699; color:#f00;}

这里边：text-shadow后边的第一个值代表：横坐标的偏移；

                                                                 第二个值代表：纵坐标的偏移；

                                                 第三个值代表：模糊程度；

                                                 第四个值代表：阴影扩张大小；

                                        

 

4.开放的网络字体：

这里就不具体就少网络字体都有哪些了，这些网络字体，更能方便大家，以前要插入图片解决的问题，现在

用增加的网络字体就能解决了。

 

 

5.圆角

用css3画圆角的方法：

列：h2{background-color:#F3F3F3; font-size:14px; font-family:"微软雅黑"; padding:8px;border-width:1px 1px 0; border-style:solid; border-color:#ddd; border-radius:5px 5px 0 0;}

注解：border-radius后边的四个数字分别代表的是上左、上右、下右、下左的圆角的数值。

 

 

6.背景透明效果

例：.login{position:absolute;right:0;top:10px;width:254px;height:248px;

      background-color:rgba(0,0,0,0.4);padding:15px;}

注解：rgba中rgb代表背景的颜色、a代表透明度。其中透明度的值是从0-1.由透明到不透明的过度。

 

 

7.边框背景图片

列：.box{width:800px;padding:50px;-moz-border-image:url(images/bg1.jpg) 20/30px;text-align:center;}

 

 

 

8.变换图像效果

.box li{
           width:117px;height:101px;
           border:1px solid #d8d8d8;
           background:url(images/bg5.jpg) no-repeat;
           -moz-transform-origin:0 0;          /*设置或检索对象以某个原点进行转换*/
           -moz-transform:rotate(45deg);  /*旋转的角度*/
           -webkit-transform-origin:0 0;
          -webkit-transform:rotate(45deg);
           -o-transform-origin:0 0;
          -o-transform:rotate(45deg);
         -ms-transform-origin:0 0;
        -ms-transform:rotate(45deg);
         transform-origin:0 0;
        transform:rotate(45deg);

}

注解：根据不同的浏览器，设置原点旋转和旋转的角度。

 

 

9.盒子阴影

box-shadow:5px 5px 5px 8px rgba(0,0,0,.6)

注解：第一个值：阴影偏移横坐标的值。

            第二个值：阴影偏移纵坐标的值。

           第三个值：阴影的虚实程度。

           第四个值：阴影的扩展程度。

          括号后面是盒子的颜色以及透明度。