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>
View Code
