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>CSS3基础知识
原文地址：https://www.cnblogs.com/anzhilanxiao/p/CSS3.html