CSS3样式和新特性

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weclove2008/article/details/78002569

CSS3样式

1边框

border-radius圆角边框

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

border-shadow边框阴影

div
{
box-shadow: 10px 10px 5px #888888; /*水平偏移 垂直偏移 渲染大小 阴影颜色 */
}

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 */
}

2背景

background-size

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

3字体

font-face(搁置)

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。

通过 CSS3，web 设计师可以使用他们喜欢的任意字体。

当您您找到或购买到希望使用的字体时，可将该字体文件存放到 web 服务器上，它会在需要时被自动下载到用户的计算机上。

您“自己的”的字体是在 CSS3 @font-face 规则中定义的。

4.转换in 2D

• translate() 移动 （x坐标 y坐标）

• rotate() 旋转（角度）

• scale() 缩放（水平倍数，垂直倍数）

• skew() 翻转(x y轴 角度)

• matrix(综合参数：旋转、缩放、移动以及倾斜元素)

  ​

5.过渡（延迟）

控制总的转换时间：transform-duration:X s;

div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transition:width 2s,height 2s,transform 2s; /*为不同类型的转换设置过渡时间*/
-moz-transition: width 2s, height 2s, -moz-transform 2s; /*Firefox4*/
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;/*Chorome and Safari*/
-o-transition: width 2s, height 2s,-o-transform 2s; /*Opera*/
}
div:hover
{
    transform:rotateX(120deg);
    -moz-transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg);
    -o-transform:rotateX(120deg);
    width:250px;
    height:250px;   
}

6.动画

CSS

@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;}
}

HTML

div
{
animation: myfirst 5s;   /*采用的动画名称和延迟时间*/

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

7.多列

列的数量 column-count

列之间的距离 column-gap

列的附加规则 column-rule

8.用户界面

• resize /允许用户调整大小/

div
{
resize:both;
overflow:auto;
}

• box-sizing /更精准的盒大小/

  div
  {
  box-sizing:border-box;
  -moz-box-sizing:border-box;   /* Firefox */
  -webkit-box-sizing:border-box;    /* Safari */

  ​

• outline-offset /制定间距绘制外轮廓/

outline:1px dotted gray;
outline-offset:15px;

引用资料 : http://www.w3school.com.cn/css3/