总结的一些css3的一些东西,放个地方吧

/*css3的常用样式*/

border-radious:【边框圆角方式】

 animation: run 5s infinite linear; 【动画效果，：运行5秒，常见样式，匀速】

  -webkit-transform-style: preserve-3d; //chrome

     -moz-transform-style: preserve-3d; //ff

       transform-style: preserve-3d;【变化方式，3D】

div.circle{

    height:50px;/*与width设置一致*/

    width:100px;

    background:#9da;

    border-radius:50px 50px 0 0;/*四个圆角值都设置为宽度或高度值的一半*/【画上半圆】 左半圆border-radious:0 50px 50px 0;

<h2>外阴影</h2>

<div class="boxshadow-outset">

</div>

<br />

<h2>内阴影</h2>

<div class="boxshadow-inset">

</div>

<br />

<h2>多阴影</h2>

<div class="boxshadow-multi">  box-shadow:x偏移 y偏移 模糊半径 阴影半径 颜色 （内阴影/外阴影/multi多）

 border:15px solid #ccc; 

 border-image:url(http://img.mukewang.com/52e22a1c0001406e03040221.jpg) 15px  repeat/round/stretch; 【图片边框】先有边框再设置图片。  

运动：

css3 transition:all 0.3s ease;// 经过0.3s全部效果展现

//文字溢出的问题：

overflow:hidden;溢出为隐藏。

white-space:强制文本在一行内显示。    //先显示在一行，然后再设置为溢出省略号显示

text-overflow:ellipsis;溢出显示为省略号……

word-wrap:normal/break-word;    normal为浏览器默认的一般这么用。

设置引入外部字体：

@font-face{

    font-family:"my font";  //字体名称

    src：引入字体的路径。

}

 p{ font-size:12px;

    font-family:"my font"

    }

字体阴影设置：

text-shadow: x偏移， y偏移， 模糊值（如10px），颜色；  例子：text-shadow:2px 2px 2px red;

颜色的渐变：

直线的渐变：.div{background:line-gradient(to left,red,green);}

径向渐变：background:radial-gradient(red,blue);//默认是椭圆，加个圆形渐变：（cicle,red,blue）

#grad1 {

    height: 150px;

    width: 200px;

    background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */

    background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */

    background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */

    background: radial-gradient(red, green, blue); /* 标准的语法（必须放在最后） */

背景图片的设置：

background-origin:border-box|padding-box|content-box;(边框，padding,内容区)  //从什么位置展示

background-clip:border-box|padding-box|content-box;(边框，padding,内容区)   //从什么位置被剪切

css3的选择器

a[class^="column"]{background:red;}  开头带column的  css样式：background:red  冒号不是等会

a[href$="doc"]{background:green;}     结尾带  doc的

a[title*="box"]{background:blue;}     中间含有  box的。