CSS3相对CSS来说增加了许多新的属性，还未系统学习js，所以尚未能和js结合，基础如下：
1.边框属性
1.border-radius；
例如：width:100px;
height:100px;
border-radius:10px 20px 30px 40px;
可以利用它画圆，半圆（必须用长方形）和各种奇怪形状
半圆：
width:200px;
height:100px;
border-radius:100px 100px 0% 0%;
2.box-shadow；阴影
box-shadow:10px 10px 10px orange inset;
-moz- -webkit- -obox-都是为了兼容旧版浏览器
2.背景图片属性
background-origin :设置背景图片开始显示的位置
content-box
padding-box 默认
border-box
background-clip: 设置背景图片平铺的位置
content-box
padding-box
border-box 默认
background-size:修改图片的尺寸100% 100%
3.2D转换
transform:translate(x,y);平移
transform:scale(x,y);缩放
transform:rotate(30deg);旋转
transform:skew(30deg,30deg);斜旋转；
4.过渡 transition（示例鼠标浮动效果）
.a1{
width:200px;
height:200px;
background:#ff00ff;
transition:width 10s,background 20s;
}
.a1:hover{
width:400px;
background:#ffff00;
}//当鼠标浮动上去时，方块变大，变颜色
5.动画 animation（用于打开后的动画效果）
@keyframes myfirst{
from{
width:1px;
height:1px;
background:#ffffff;
}
to{//可用百分比代替
width:100px;
height:100px;
background:#ff0000;
}
}
.ear{
animation:myfirst 10s;
width:100px;
height:100px;
background:green;
animation-direction:alternate;逆向
animation-iteration-count:10;播放次数
}
6.多列属性(一段文字)
.ear{
column-count:3;/*分割的列数*/
column-gap:50px;/*分割的列间距*/
}
column-count 规定元素应该被分隔的列数。
column-fill 规定如何填充列。
column-gap 规定列之间的间隔。
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。
column-width 规定列的宽度。
columns 规定设置 column-width 和 column-count 的简写属性。
作业展示：
1 <!DOCTYPE html>
2
3 <html>
4
5 <head>
6
7 <meta charset="utf-8"/>
8 <meta name="keywords" content="html,aowin"/>
9 <title>homework_Android</title>
10 <style>
11 .robot{
12 width:900px;
13
14 text-align:center;
15 animation:step 2s;
16 animation-direction:alternate;
17 animation-iteration-count:6;
18 }
19 @keyframes step{
20 from{
21 position:relative;
22 left:1px;
23
24 }
25 to{
26 position:relative;
27 left:900px;
28
29 }
30 }
31
32
33 .ear1{
34 background:#A4CA39;
35 width:5px;
36 height:70px;
37 border-radius:100px 100px 10% 10%;
38 position:relative;
39 top:68px;
40 left:98px;
41 transform:rotate(-30deg);
42 transition:width 1s,height:1s;
43
44 }
45 .ear1:hover{
46 width:7px;
47 height:72px;
48 }
49 .ear2{
50 background:#A4CA39;
51 width:5px;
52 height:72px;
53 border-radius:100px 100px 10% 10%;
54 position:relative;
55 top:60px;
56 left:99px;
57 transform:rotate(60deg);
58 transition:width 1s,height:1s;
59 }
60 .ear2:hover{
61 width:7px;
62 height:72px;
63 }
64
65 .head{
66 background:#A4CA39;
67 width:200px;
68 height:100px;
69 border-radius:100px 100px 0% 0%;
70 margin:5px;
71 position:relative;
72 top:50px;
73 left:50px;
74 }
75 .eye1{
76 background:white;
77 width:20px;
78 height:20px;
79 border-radius:50%;
80 position:relative;
81 top:45px;
82 left:55px;
83 margin:5px;
84 transition:transform 1s;
85 }
86 .eye1:hover{
87 transform:scale(1.1,1.1);
88 }
89 .eye2{
90 background:white;
91 width:20px;
92 height:20px;
93 border-radius:50%;
94 position:relative;
95 left:52px;
96 margin:5px;
97 transition:transform 1s;
98 }
99 .eye2:hover{
100 transform:scale(1.1,1.1);
101 }
102 .arm1{
103 background:#A4CA39;
104 width:40px;
105 height:200px;
106 border-radius:100px 100px 100px 100px;
107 position:relative;
108 top:58px;
109
110 }
111
112 .duzi{
113 background:#A4CA39;
114 width:200px;
115 height:200px;
116 border-radius:0px 0px 20px 20px;
117 position:relative;
118 left:55px;
119
120 }
121 .arm2{
122 background:#A4CA39;
123 width:40px;
124 height:200px;
125 border-radius:100px 100px 100px 100px;
126 position:relative;
127 left:216px;
128 transition:transform 1s;
129 }
130 .arm2:hover{
131 transform:rotate(40deg);
132 }
133 .leg1{
134 background:#A4CA39;
135 width:42px;
136 height:60px;
137
138 position:relative;
139 top:58px;
140 left:98px;
141
142 }
143 .leg2{
144 background:#A4CA39;
145 width:42px;
146 height:60px;
147 position:relative;
148 left:77px;
149
150 }
151 hr{
152 position:relative;
153 top:50px;
154 }
155
156
157
158
159
160
161 </style>
162
163 </head>
164 <body >
165 <div class="robot">
166 <div class="ear1">
167 <div class="ear2"></div>
168 </div>
169 <div class="head">
170 <div class="eye1">
171 <div class="eye2"></div>
172 </div>
173 </div>
174 <div class="body1">
175 <div class="arm1">
176 <div class="duzi">
177 <div class="arm2">
178 </div>
179 </div>
180 </div>
181 </div>
182 <div class="leg1">
183 <div class="leg2"></div>
184 </div>
185 </div>
186
187 <hr/>
188 <p style="margin:60px; text-align:center;font-size:36px; color:#A4CA39;">机器人爱滑冰</p>
189 </body>
190
191
192
193 </html>
原文地址：https://www.cnblogs.com/anzhilanxiao/p/CSS3.html