CSS3

h1{
    text-shadow: 5px 5px 5px #FF0000;  /*4个参数：水平阴影、垂直阴影、模糊的距离、阴影颜色*/
}

p{
    text-overflow: clip;  /*剪掉溢出的文本*/
    text-overflow: ellipsis;  /*用省略号...代替溢出的部分来显示，最常用*/
}

p{
    word-break:break-all;  /*如果换行处的单词过长，会拆分单词，并不会加连词线*/
    word-break: keep-all; /*如果换行处的单词过长，会转到下一行显示*/
    word-break: normal;  /*使用浏览器默认的换行符*/
}

div{
    border:1px solid red;
    border-radius:5px; /*设置圆角大小，数值越大，越圆*/
}

p{
    border-image: url("border.png")  30  30  round; 
}

div{
    width:300px;
    height:100px;
    box-shadow: 10px 10px 5px #888888;  /*参数：水平阴影位置、垂直阴影位置、模糊距离、阴影颜色，前三个参数支持负数*/
}

div{
    transform:translate(50px,100px);
}

transform: translate(50px,100px);   /*平移，参数：水平平移距离、垂直平移距离，支持负数*/
transform: rotate(30deg);   /*旋转，以左上角为基点，负数表示逆时针旋转*/
transform: scale(2,3);  /* 缩放，参数：水平缩放倍数、垂直缩放倍数，小数形式 */

transform: translate3d(x,y,z);   /*3d平移*/
transform: rotate3d(x,y,z,angle);   /*3d旋转*/
transform: scale3d(x,y,z);   /* 3d缩放 */

translateX(x)    
translateY(y)    
translateZ(z)    

#gradient {
      background: linear-gradient(to right, red , blue, grey); 
}

#gradient {
      background: linear-gradient(to right, red , blue, grey);  /*从左到右*/
      background: linear-gradient(to bottom, red , blue, grey);  /*从上到下*/
      background: linear-gradient(to bottom right, red , blue, grey);  /*左上到右下*/
      background: linear-gradient(90deg, red , blue, grey);  /*可使用角度*/
}  

#gradient {
  background: radial-gradient(circle, red 5%, green 15%, blue 60%); 
}

#gradient {
  background: radial-gradient(red, green, blue); 
}

div{
    width: 100px;
    height:100px;
    background-color: red;
}

div:hover{
    width: 300px;
    height:300px;
    background-color: red;
}

div {
    width: 100px;
    height: 100px;
    background: red;
    transition: width 2s, height 2s, transform 2s;  /*可指定多个属性，用逗号隔开即可*/
}

div:hover {
    width: 300px;
    height: 300px;
    transform: rotate(180deg);
}

 transition: width 5s linear 2s;

<style> 
div
{
    width:100px;
    height:100px;
    background:red;

    animation:myAnimation 5s;  /*指定动画名称、多少秒内完成*/
}

@keyframes myAnimation  /*动画名称*/
{
    0%   {background:red;}   /*0%表示动画开始，100%表示动画结束*/
    50%  {background:yellow;width:200px;height:200px}  /*{}中写要变化的样式，可以有多个属性，分号隔开即可*/
    100% {background:green;width:100px;height:100px}
}
</style>

animation:动画名称  多少时间内完成  变化速度  开始时间;

<style> 
div
{
    width:100px;
    height:100px;
    background:red;
}

div:hover{
    animation:myAnimation 5s;
}

@keyframes myAnimation
{
    0%   {background:red;} 
    50%  {background:yellow;width:200px;height:200px} 
    100% {background:green;width:100px;height:100px}
}
</style>    animation:myAnimation 5s;

p{
    column-count:3;   /*将<p>中的内容分为3大列显示，列之间用一竖空白隔开*/
}

p{
   column-count:3;  
　　column-gap: 40px;  /*指定列之间的间距*/
}

p{
   column-count:3;  
　　column-gap: 40px; 
　　column-rule: 1px solid lightblue;  /*指定列之间的分隔竖线样式，缺省此属性时默认没有竖线分隔*/
}