css3基础
周六周日在宿舍闲来无事，这段时间一直在忙着专业其他方面的书籍的学习，一段时间没接触到前端这块了，索性就打算花这两天好好回顾一下前端的一些知识。
一下是css3的一些属性，规则，貌似看着混乱不堪，但css3的一些基本知识都在里面，由于这些只为自己以后复习所用，所以就做的稍微粗糙了点，之后我还会给自己把之前的css学到东西也整理一下，供自己以后工作好好参考：
1 /*border属性*/ 2 div{ 3 border:2px; 4 border-radius:25px;/*用于创建圆角*/ 5 box-shadow: 10px 10px 5px #888888;/*添加阴影*/} 6 7 #round{border-image: url(border.png) 30 30 round; 8 -webkit-border-image:url(border.png) 30 30 round; /* Safari 5 and older */ 9 -o-border-image:url(border.png) 30 30 round;/* Opera */ 10 } 11 #stretch{ 12 border-image:url(border.png) 30 30 stretch; 13 -webkit-border-image:url(borde.png) 30 30 stretch; 14 -o-border-image:; 15 16 } 17 18 /*背景*/ 19 div{ 20 background-image: url(img.png); 21 background-size: 80px 60px;/*指定背景图像的大小*/ 22 background-repeat: no-repeat; 23 } 24 div{ 25 background-image: url(img.png); 26 background-size: 100% 100%;/*指定背景图片的填充范围*/ 27 background-repeat: no-repeat; 28 background-origin: content-box;/*指定背景图片的位置区域参数有border-box.padding-box.content-box*/ 29 30 } 31 body 32 { 33 background-image:url(img_flwr.gif),url(img_tree.gif);/*允许加入多个图形*/ 34 } 35 36 37 /*gradients渐变 -在两个或多个指定的颜色之间显示平稳的过渡*/ 38 39 /*语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);*/ 40 41 #grad{/*上到下的线性渐变*/ /*IE9及之前的版本不支持这个属性*/ 42 background: -webkit-linear-gradient(red,blue);/*safari5.1-6.0*/ 43 background: -moz-linear-gradient(red,blue); 44 background: -o-linear-gradient(red,blue); 45 background: linear-gradient(red,blue);/*标准语法*/ 46 47 } 48 #grad{/*左到右的线性渐变*/ 49 background: -webkit-linear-gradient(left,red,blue);/*safari5.1-6.0*/ 50 background: -moz-linear-gradient(left,red,blue); 51 background: -o-linear-gradient(left,red,blue); 52 background: linear-gradient(left,red,blue); 53 } 54 #grad{/*上左对角线渐变下左*/ 55 background: -webkit-linear-gradient(top left,red,blue);/*safari5.1-6.0 默认表示左下角*/ 56 background: -o-linear-gradient:(bottom right,red,blue); 57 background: -moz-linear-gradient(bottom right,red,blue); 58 background: linear-gradient(to bottom right,red,blue);/*标准语法，必须放在最后*/ 59 } 60 61 /*角度渐变*/ 62 /*语法：background: linear-gradient(angle, color-stop1, color-stop2); */ 63 #grad{ 64 background: -webkit-linear-gradient(90deg,red,blue); 65 background: -o-linear-gradient:(90deg,red,blue); 66 background: -moz-linear-gradient(90deg,red,blue); 67 background: linear-gradient:(90deg,red,blue);/*默认语法，必须放在最后*/ 68 } 69 /*带彩虹的线性渐变*/ 70 #grad{ 71 background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);/*safari5.1-6.0*/ 72 background:-moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 73 background:-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet); 74 background:linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);/*标准的语法，必须放在最后*/ 75 } 76 77 /*使用透明度Transparency 78 添加透明度，我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。 79 */ 80 #grad{/*从左到右的线性渐变，带有透明度*/ 81 background:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); 82 background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 83 background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); 84 background: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1))/*标准的语法，必须放在最后*/ 85 } 86 87 /*重复的线性渐变*/ 88 #grad{ 89 background:-webkit-repeating-linear-gradient(red,yellow 5%,blue 5%); 90 background: -o-repeating-linear-gradient(red,yellow 5%,blue 5%); 91 background: -moz-repeating-linear-gradient(red,yellow 5%,blue 5%); 92 background: repeating-linear-gradient(red,yellow 5%,blue 5%); 93 } 94 95 /*径向的线性渐变 96 语法：background: radial-gradient(center, shape size, start-color, ..., last-color); 97 默认情况下，渐变的中心是 center（表示在中心点）， 98 渐变的形状是 ellipse（表示椭圆形）， 99 渐变的大小是 farthest-corner（表示到最远的角落）。 100 */ 101 #grad{ 102 background: -webkit-radial-gradient(red,green,blue); 103 background: -o-radial-gradient(red,green,blue); 104 background: -moz-radial-gradient(red,green,blue); 105 background: radial-gradient(red,green,blue); 106 } 107 /*径向渐变*/ 108 #grad{ 109 background: -webkit-radial-gradient(red 5%,green 10%,blue 40%); 110 background: -o-radial-gradient(red 5%,green 10%,blue 40%); 111 background: -moz-radial-gradient(red 5%,green 10%,blue 40%); 112 background: radial-gradient(red 5%,green 10%,blue 40%); 113 } 114 /*设置形状 115 形状有circle(圆形) 或 ellipse(椭圆)*/ 116 #grad{ 117 height: 150px; 118 width:200px; 119 background:-webkit-radial-gradient:(circle,red,yellow,green);/*safari5.1-6.0*/ 120 background: -o-radial-gradient(circle,red,yellow,green); 121 background: -moz-radial-gradient(circle,red,yellow,green); 122 background: radial-gradient(circle,red,yellow,green);/*标准语法，必须放在最后*/ 123 } 124 125 126 127 128 129 /*文本效果*/ 130 /*文本阴影与换行 131 text-shadow:水平阴影，垂直阴影，模糊的距离，以及阴影的颜色. 132 word-wrap：break-word*/ 133 p{ 134 text-shadow:5px 5px 5px #fff; 135 word-wrap:break-word;/*允许长文本换行*/ 136 } 137 138 /*css3字体 139 *@font-face规则 140 *Internet Explorer 9+, Firefox, Chrome, Safari, 和 Opera 支持 WOFF (Web Open Font Format) 字体. 141 Firefox, Chrome, Safari, 和 Opera 支持 .ttf(True Type字体)和.otf(OpenType)字体字体类型）。 142 Internet Explorer 9 只支持 .eot 字体. 143 * 144 */ 145 <style> 146 @font-face 147 { 148 font-family: myfonts; 149 src:url('Sansation_Light.ttf'), 150 url('Sansation_Light.eot');/*for IE 9 定义字体文件的 URL*/ 151 font-weight: bold; 152 /*必须添加另一个包含粗体文字的@font-face规则 153 浏览器使用这一文本的字体系列"myFirstFont"时应该呈现为粗体 154 */ 155 font-stretch:condensed;/*定义如何拉伸字体*/ 156 } 157 div{ 158 font-style: myfonts; 159 } 160 </style> 161 162 163 /*2D转换*/ 164 /*2D变换方法： 165 translate() 166 rotate() 167 scale() 168 skew() 169 matrix() 170 */ 171 172 div{ 173 transform:rotate(30deg);/*旋转30度*/ 174 -ms-transform:rotate(30deg);/*IE 9*/ 175 -webkit-transform:rotate(30deg); 176 } 177 178 /*translate方法*/ 179 div{ 180 transform:translate(50px,100px);/*从起始位置（o o）移动到位置（50px，100px）*/ 181 -ms-transform:translate(50px,100px); 182 -webkit-transform:translate(50px,100px); 183 } 184 185 /*scale方法--scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数*/ 186 div{ 187 transform:scale(2,4);/*表示宽度变为原来的两倍，长度变为原来的四倍*/ 188 -ms-transform:scale(2,4); 189 -webkit-transform:scale(2,4); 190 } 191 192 /*skew方法 193 根据横向（X轴）和垂直（Y轴）线参数给定角度 194 */ 195 196 div{ 197 transform:skew(30deg,20deg);/*绕X轴和Y轴周围20度30度的元素。*/ 198 -ms-transform:skew(30deg,20deg); 199 -webkit-transform:skew(30deg,20deg); 200 } 201 202 /*matrix()方法 203 六个参数，包含旋转，缩放，移动（平移）和倾斜功能 204 */ 205 div{ 206 transform:matrix(0.886,0.5,-0.5,0.886,0,0); 207 -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); 208 -webkit-transform:matrix((0.866,0.5,-0.5,0.866,0,0)); 209 } 210 211 /*3D转换*/ 212 /*rotateX()方法 213 围绕其在一个给定度数X轴旋转的元素 214 */ 215 div{ 216 transform:rotateX(120deg); 217 -webkit-transform:rotateX(120deg);/*safari and chrome*/ 218 } 219 /*rotateY()方法 220 围绕其在一个给定度数Y轴旋转的元素 221 */ 222 div{ 223 transform:rotateY(120deg); 224 -webkit-transform:rotateY(120deg); 225 } 226 227 /*css3过渡*/ 228 div{ 229 height: 100px; 230 width:200px; 231 background:blue; 232 transition:width 2s;/*用于宽度属性的过渡效果，时长为 2 秒*/ 233 -webkit-transition:width 2s; 234 } 235 div:hover{ 236 width: 400px; 237 } 238 /*多项转变*/ 239 div{ 240 height:100px; 241 width:200px; 242 background:blue; 243 -webkit-transition:width 2s,height 2s,-webkit-transform 2s;/*for safari 3.1-6.0 and chrome */ 244 transiton:width 2s,height 2s,transform 2s; 245 } 246 div:hover{ 247 width:200px; 248 height: 400px; 249 -webkit-transform:rotate(180deg); 250 transform:rotate(180deg); 251 } 252 /*所有过度属性*/ 253 div{ 254 width:100px; 255 height:100px; 256 background:blue; 257 transition-property:width;/*规定应用过度的css属性的名称*/ 258 transition-duration:2s;/*定义过渡效果花费的时间，默认是0*/ 259 260 transition-timing-function:linear;/*规定过渡效果的事件曲线，默认是ease*/ 261 transition-delay:2s;/*规定过渡效果开始的时间。默认是0*/ 262 /*safari*/ 263 /*简写方式： 264 transitiion:width 2s linear 2s; 265 -webkit-transiton:width 2s linear 2s; 266 */ 267 -webkit-transiton-property:width; 268 -webkit-transiton-duration:1s; 269 -webkit-transition-timing-function:linear; 270 -webkit-transition-delay:2s; 271 } 272 273 274 /*动画效果*/ 275 /*第一种*/ 276 div{ 277 awidth:200px; 278 height: 200px; 279 background: red; 280 animation:myfirst 5s; 281 -webkit-animation:myfirst 5s; 282 } 283 @keyframes myfirst{ 284 from{background:red; 285 286 }to{ 287 background:blue; 288 } 289 } 290 291 -webkit-@keyframe myfirst{/*for Safari and chrome*/ 292 from{ 293 background:red; 294 }to{ 295 background:blue; 296 } 297 } 298 /*第二种*/ 299 div{ 300 width:200px; 301 height: 200px; 302 background: red; 303 animation:myfirst 5s; 304 -webkit-animation:myfirst 5s; 305 } 306 307 @keyframe myfirst{ 308 0% {background:red;} 309 25% {background: yellow;} 310 50% {background: blue;} 311 75%{background: green;} 312 } 313 -weblit-@keyframe myfirst{ 314 0% {background:red;} 315 25% {background: yellow;} 316 50% {background: blue;} 317 75%{background: green;} 318 } 319 320 /*第三种*/ 321 div{ 322 width:200px; 323 height:300px; 324 background: red; 325 position: relative; 326 animation:myfirst 5s; 327 -webkit-animation:myfirst 5s; 328 } 329 @keyframe myfirst{ 330 0%{background:red;left:0px;top:0px;} 331 25%{background:blue;left:100px;top:0px;} 332 50%{background: green;left:100px;top:100px;} 333 75%{background: yellow;left:0px;top:100px;} 334 100%{background: red;left:0px;top:0px;} 335 } 336 -webkit-@keyframe myfirst{ 337 0%{background: red;left:0px;top:0px;} 338 25%{background: blue;left:100px;top:0px;} 339 50%{background: green;left:100px;top:100px;} 340 75%{background:yellow;left:0px;top:100px;} 341 100%{background:red;left:0px;top:0px;} 342 } 343 /*第四种*/ 344 div{ 345 width:100px; 346 height:100px; 347 background:red; 348 animation-name:myfirst; 349 animation-timing-function:linear; 350 animation-durarion:5s; 351 animation-delay:2s; 352 animation-iteration-count:infinite; 353 animation-direction:alternate; 354 animation-play-state:running; 355 /*safari and chrome*/ 356 -webkit-animation-name:myfirst;/**/ 357 -webkit-animation-duration:5s;/*设置动画完成的时间*/ 358 359 -webkit-animation-timing-function:linear;/*指定动画以什么速度完成播放 360 linear 动画从头到尾的速度是相同的。 361 ease 默认。动画以低速开始，然后加快，在结束前变慢。 362 ease-in 动画以低速开始。 363 ease-out 动画以低速结束。 364 ease-in-out 动画以低速开始和结束。 365 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。*/ 366 367 -webkit-animation-delay:2s;/*指定动画延迟几秒后开始*/ 368 369 -webkit-animation-iteration-count:infinite;/*定义动画应该播放多少次。 370 n 一个数字，定义应该播放多少次动画 371 infinite 指定动画应该播放无限次（永远）*/ 372 373 -webkit-animation-direction:alternate;/*定义是否循环交替反向播放动画, 374 normal默认值,.动画按正常播放。reverse动画反向播放。alternate动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 375 alternate-reverse动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 376 initial 设置该属性为它的默认值。 377 inherit 从父元素继承该属性。*/ 378 379 -webkit-animation-play-state:running;/*指定动画是否正在运行或已暂停,paused指定暂停动画,running指定正在运行的动画*/ 380 381 382 /*简写形式 383 div 384 { 385 animation: myfirst 5s linear 2s infinite alternate; 386 /* Safari and Chrome: */ 387 /* 388 -webkit-animation: myfirst 5s linear 2s infinite alternate; 389 } */ 390 } 391 /*css3多列*/ 392 div{ 393 /*column-rule: column-rule-width column-rule-style column-rule-color;*/ 394 -moz-column-rule:2px outset #fff;/*指定列之间的规则：宽度，样式和颜色*/ 395 -webkit-column-rule:2px outset #fff; 396 column-rule:2px outset #fff; 397 398 -moz-column-gap:20px;/*指定列之间差距*/ 399 -webkit-column-gap:20px; 400 column-gap:20px; 401 402 -moz-column-count:3;/*指定列的数量*/ 403 -webkit-column-count:3; 404 column-count:3; 405 } 406 407 /*用户界面*/ 408 409 div{ 410 border:1px solid #ccc; 411 padding:10px 40px; 412 width: 300px; 413 resize:both;/*resize属性指定一个元素是否应该由用户去调整大小。*/ 414 overflow:auto; 415 416 } 417 /*调整方框大小box-sizing*/ 418 div.container{ 419 width:30em; 420 border:1em solid; 421 422 } 423 div.box{ 424 box-sizing:border-box; 425 -moz-border-sizing:border-box;/*box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容*/ 426 width:50%; 427 border:1em solid #ccc; 428 float:left; 429 430 } 431 /*外形修饰outline-offset*/ 432 div{ 433 width:200px; 434 height:70px; 435 margin:150px; 436 padding:10px; 437 border:1px solid #ccc; 438 outline:2px solid red; 439 outline-offset:15px;/*规定边框边缘之外 15 像素处的轮廓*/ 440 441 }
}
