CSS3新属性

边框：

• border-radius 用于创建圆角

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

• box-shadow 用于向方框添加阴影

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

• border-image 使用图片来创建边框

  div
  {
  border-image:url(border.png) 30 30 round;  /*stretch为边框拉伸，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 */     }

 

背景：

• background-size 规定背景图片的尺寸,以像素或百分比规定尺寸
• background-origin 规定背景图片的定位区域,可以放置于 content-box、padding-box 或 border-box 区域
• 可以放置多个背景

    body
    { 
      background-image:url(bg_flower.gif),url(bg_flower_2.gif);
    }

文本：

• text-shadow 向文本应用阴影，规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色

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

  

• word-wrap 允许文本强制进行换行 - 即使这意味着会对单词进行拆分

  p {word-wrap:break-word;}

字体：

      @font-face 规则

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

div
{
font-family:myFirstFont;
}
</style>

 

2D变化：

• translate() 元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
• rotate() 元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
• scale() 元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

  div
  {
  transform: scale(2,4);
  -ms-transform: scale(2,4);	/* IE 9 */
  -webkit-transform: scale(2,4);	/* Safari 和 Chrome */
  -o-transform: scale(2,4);	/* Opera */
  -moz-transform: scale(2,4);	/* Firefox */
  }  /*值 scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

• skew() 元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• matrix() 把所有 2D 转换方法组合在一起,需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

3D变化：

• rotateX() 元素围绕其 X 轴以给定的度数进行旋转
• rotateY() 元素围绕其 Y 轴以给定的度数进行旋转。

过渡：transition元素从一种样式逐渐改变为另一种的效果,区别2D3D是过渡有一个变化过程

• 规定您希望把效果添加到哪个 CSS 属性上
• 规定效果的时长

  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;
  }/*当鼠标指针悬浮于 <div> 元素上时宽度变化，当指针移出元素时，它会逐渐变回原来的宽度*/

动画：过渡设置元素属性的变化过程，动画可以设置自身属性和元素所在位置的变化

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

@keyframes myfirst //动画名称 { 0% {background: red;} //各时刻变化的css样式  25% {background: yellow;}   50% {background: blue;}   100% {background: green;} }

div
{
animation: myfirst 5s;  //动画名称  动画时间
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

多列：

• column-count 规定元素应该被分隔的列数
• column-gap 规定列之间的间隔
• column-rule 设置列之间隔断的宽度、样式和颜色规则。

用户界面：

• resize 规定是否可由用户调整元素尺寸
• box-sizing 允许您以确切的方式定义适应某个区域的具体内容
• outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓

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

 

来源：https://www.cnblogs.com/clairexia/p/6636916.html