-moz- 兼容火狐浏览器
-webkit- 兼容chrome 和safari
1.角度
transform:rotate(30dge) 水平线与div 第四象限30度
transform:rotate(-30dge) 水平线与div 第一象限30度
2.阴影
box-shadow:5px 5px 5px #888888;
3.边框
border-radius
box-shadow:阴影
border-image:图片边框
border-radius:
四个值：左上、右上、右下、左下
三个值：左上、右上角和左下角、左下角
两个值：左上角和右下角、右上角和左下角
一个值：四个角相同
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
4.bottom 底部
单div,双图片背景设置
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom;
background-repeat: no-repeat, repeat;
padding: 15px;
}
5.background-origin:属性指定了背景图片的位置区域
border-box 边框
padding-box 内边距中
content-box 内部区域
6.background-clip属性
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
7.渐变色
线性渐变色： Liner Gradients 向下/左/右/上/对角
径向渐变色: Radial Gradients 由他们的中心定义
通常使用background-img:
8.文字效果
text-shadow:
box-shadow:盒子阴影
word-wrap:
word-break: break-word;//允许文本换行不拆分文字
word-break:break-word;//单词拆分换行
9.2D转换
transform:
案例：transform:rotate(30dge) rotate是旋转角度 rotateX根据X轴旋转 rotateY根据Y轴旋转
transform:translate(50px,100px) 向左平移50，向上100
transform-orign:
10.3D动画设置
案例： transition可以设置宽度高度变化时间，也可以添加边框旋转等设置变化时间
div
{
100px;
height:100px;
background:red;
transition:width 2s,height 2s,transform 2s;
}
div:hover
{
300px;
height:400px;
transform:rotate(30deg)
}
11.css3动画
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
（1） 规定动画的名称
（2） 规定动画的时长
案例：(进行n百分比的时候，可以添加其他的属性边框、透明度、位置等)
div
{
100px;
height:100px;
background:red;
animation:myfirst 5s;
}
@-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
25% {background:yellow;}
50% {background:blue;}
100% {background:green;}
}
12.多列属性 可以是的文本像报纸一样去排版
column-count ：3； //表示3列
column-gap:10px; //定义列与列之间间隔是10像素
column-rule-style:solid;//实线 dotted虚线间隔 outset 黑灰线
column-width :指定列的宽度
column-count :跨列数
13.outline 外边框线
15.轮廓修饰 ouline-offset:30px; //指轮廓加大30px,轮廓不占用空间，不一定是矩形
16.圆角图片可以通过 border-radius 修饰
17.禁用按钮的样式设置
.disabled {
opacity: 0.6;//透明度0.6
cursor: not-allowed; //设置不可点击
}
18.width(宽) + padding(内边距) + border(边框) = 元素实际宽度
height(高) + padding(内边距) + border(边框) = 元素实际高度