标签：打开 ora pad lock doc pos ado 示例 style
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>
标签：打开 ora pad lock doc pos ado 示例 style
原文地址：https://www.cnblogs.com/anzhilanxiao/p/CSS3.html
