边框：

• 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 规则

 

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

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

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