边框

div{
    border:2px solid#aaaaaa ; //边框粗细 实体边框的颜色
    padding:50px 40px ;  //衬垫大小

    width:300px ;  //宽度
    height:100px ;  //高度

    border-radius:50px;   //圆角半径
    border-radius:10px,20px,30px,0px;   //坐上角，右上角，右下角，左下角  
    border-radius:10px/20px ;  //椭圆边框
    border-radius:20%;    //圆角
    border-radius:10%/30%;   //椭圆边框
    border-top-left-radius:20px;   //左上角弧度
    border-image:url(/xx/xx/xx.png) 30 30 round/stretch;   //图片边框：图片路径，图片宽度，图片高度， 平铺/拉伸   （CSS3 允许您为元素使用多个背景图像。）
}

div{
    box-shadow:10px,10px,5px #aaaaaa;   //方框阴影：左偏移量，下偏移量，渐变度，阴影颜色
    
}

背景

div{
    background:#aaaaaa;   //背景颜色
    background-color:red/#aaaaaa;   //背景颜色
    background:url(/xx/xx/xx.png);   //背景图片
    background-reoead:repeat/no-repeat;   //背景图片复制，不复制
    background-position:left top;   //背景图片位置
    background-size:20% 40%；    //
    background-origin:border-box/padding-box/content-box；    //边框位置，衬垫位置，中心位置
    background-clip:border-box/padding-box/content-box;    //区域
    
}

文本

div{
    text-shadow:5px 5px 5px #FF0000;    //文本阴影
    word-wrap:break-word;    //长单词断行
}

Paste_Image.png

2D

div{
    transform-origin:20% 40%;    //设置中心点（旋转中心）
    transform:rotate(19deg);    //旋转
    transform:translate(50px,200px);   //平移
    transform:scale(2,4);    //缩放
    transform:skew(30deg,20deg);    //倾斜
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);   //matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法
    需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。 
}

Paste_Image.png

样式的过渡

Paste_Image.png

div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s, background 2s,height 2s,transform 2s;
}

div:hover  //鼠标滑过
{
width:200px;
height:200px;
background:red;
transform:rotate(180deg);
}

动画

Paste_Image.png

div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
}
//第一种写法
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}
//第二种写法,多重变化
@keyframes myfirst
{
0%   {background:red;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

Paste_Image.png

多列

div{
column-count:5; //文本5列
}

用户界面

div
{
border:2px solid;
padding:10px 40px; 
width:200px;
resize:both;   //界面大小可由用户拉伸
overflow:auto;
}