1.css3边框
圆角边框 border-radius: 5px;(圆角半径)
边框阴影 box-shadow: 10px 10px 5px red;(水平阴影 垂直阴影 模糊距离 阴影的尺寸 阴影颜色 内阴影)
边框图片 border-image: url() 30 30 round; -moz-border-image:..;-webkit-border-image:...;-o-border-radius:..;
2.CSS3背景
```background-size: 100%; 100%；```
background-origin 定位区域 （padding-box border-box content-box）
3.CSS3文本效果
文本阴影 text-shadow: 5px 5px 5px red; (水平阴影 垂直阴影 模糊距离 阴影的颜色)
文本换行 word-wrap: break-word; //对长单词进行拆分、并换行
文本溢出 text-overflow；断点字换行 word-break: break-all;文本换行 text-wrap: none;
4.CSS 2D字体
5.CSS 转换
{transform: rotateX(120deg);-webkit-transform: rotateX(120deg);/* Safari 和 Chrome */-moz-transform: rotateX(120deg);
2D转换属性：
translate(50px 100px) // 距离left top 移动 translateX(50px) translateY(50px)
rotate(30deg)//顺时针旋转30度
scale(2,4)//尺寸变为原来的宽的2倍，高的4倍 scaleX(2) scaleY(4)
skew(30deg, 20deg)//根据X轴 Y轴翻转 skewX30deg) skewY20deg)
matrix()//matrix() 方法需要六个参数，包含数学函数，允许旋转、缩放、移动以及倾斜元素。
3D转换属性：
transform: rotateX(120deg);
transform: rotateY(20deg);
6.CSS3过渡
{transition: width 2s;-moz-transition: width 2s;/* Firefox 4 */-webkit-transition: width 2s;/* Safari 和 Chrome */-o-transition: width 2s;/* Opera */}
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容： 规定您希望把效果添加到哪个 CSS 属性上;规定效果的时长
7.CSS3动画
@keyframe定义动画
@keyframe myfirst{
form{background: red;}
to{background: green;}
}
div{
anination: myfirst 5s；
}
