边框
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;
}
