1.在閱讀css3揭秘的基礎上，跟着書中的效果組合起來的這組代碼。
2.代碼中有四張圖片分別是 1.jpg 2.jpg 3.jpg 4.jpg; 作為demo，圖片名稱沒有語義。
3.兼容性： IE上有部分並不兼容，Edge，FF，chrome沒有問題。
4.下面是一個選擇器的實現：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>$$工具函數</title> 6 </head> 7 <body> 8 <div class="box"> </div> 9 <div class="box"> </div> 10 <script> 11 function $$(selector,context){ 12 context = context || document; 13 var elements = context.querySelectorAll(selector); 14 return Array.prototype.slice.call(elements); 15 } 16 console.log($$(".box")); 17 </script> 18 </body> 19 </html>
5.效果如圖：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 /*width:200px;*/ 9 /*height:100px;*/ 10 } 11 .box{ 12 /*background:linear-gradient(90deg,yellow,red);*/ 13 /*線性漸變*/ 14 background: linear-gradient(45deg,yellow 25%,red 0,red 50%,yellow 0,yellow 75%,red 0); 15 /*background-size:30px 30px;*/ 16 } 17 /*在瀏覽器支持這個css特性的時候應用的樣式,類似媒體查詢*/ 18 @supports (background: red){ 19 .supports{ 20 background: red; 21 } 22 } 23 /*currenColor*/ 24 .reduceCode{ 25 width:60vw; 26 height: 60vh; 27 color: red; 28 text-align: center; 29 } 30 .reduceCode hr{ 31 height:.5rem; 32 background: currentColor; 33 } 34 35 /*背景*/ 36 .box1{ 37 width:300px; 38 height:300px; 39 border:10px solid hsla(0,0%,100%,.5); 40 background: red; 41 background-clip:padding-box; 42 } 43 .borderimg{ 44 width:100px; 45 height:100px; 46 background: yellow; 47 48 border-image:url("1.jpg"); 49 } 50 .backgroudpos{ 51 width:750px; 52 height: 423px; 53 background: url("1.jpg") no-repeat; 54 border:1px solid red; 55 /*這個是background-position擴展語法,可以指定位置距離哪個邊多少距離*/ 56 background-position: right 20px bottom 30px; 57 } 58 .calc{ 59 width:750px; 60 height: 423px; 61 background: url("1.jpg") no-repeat; 62 border:1px solid red; 63 /*與上邊的作用相同，用calc()屬性,計算百分比和像素的關系*/ 64 background-position: calc(100% - 20px) calc(100% - 30px); 65 /*background-position: 100% 100%;*/ 66 } 67 68 .f{ 69 width:300px; 70 height:200px; 71 border:1px solid red; 72 } 73 .f .s{ 74 width:calc(50% - 10px); 75 height:calc(50% + 10px); 76 border:1px solid blue; 77 } 78 79 /*內圓角*/ 80 .radius{ 81 width:300px; 82 height:300px; 83 /*border:1px solid red;*/ 84 /*正文,效果自行觀看，原因在於描邊並不會跟着元素的圓角走，但bo-shadow卻會跟着圓角走。*/ 85 background: tan; 86 border-radius:.8em; 87 padding:1em; 88 box-shadow: 0 0 0 .6em #665; 89 outline:.6em solid #665; 90 } 91 92 /*條紋背景*/ 93 .gradient{ 94 width:600px; 95 height:300px; 96 /*這種repeating的方法不用設置background-size*/ 97 /*background: repeating-linear-gradient(60deg,red 0,red 15px,blue 0 ,blue 30px);*/ 98 /*同色系條紋 還可以用透明色*/ 99 background:repeating-linear-gradient(60deg,lightblue 0,lightblue 15px,transparent 0,transparent 30px) 100 } 101 102 /*網格*/ 103 .wangge{ 104 width: 600px; 105 height:400px; 106 107 background: white; 108 background-image: linear-gradient(90deg,rgba(200,0,0,.5) 50%,transparent 0),linear-gradient(rgba(200,0,0,.5) 50%,transparent 0); 109 background-size:30px 30px; 110 } 111 .wangge2{ 112 width: 600px; 113 height:400px; 114 /*用像素單位去畫網格線*/ 115 background: #58a; 116 background-image: linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0); 117 background-size:30px 30px; 118 } 119 .wangge3{ 120 width: 600px; 121 height:400px; 122 /*藍圖網格*/ 123 background: #58a; 124 background-image:linear-gradient(90deg,white 2px ,transparent 0),linear-gradient(white 2px ,transparent 0), 125 linear-gradient(90deg,white 1px ,transparent 0),linear-gradient(white 1px ,transparent 0); 126 background-size: 75px 75px,75px 75px,15px 15px,15px 15px; 127 } 128 129 /*徑向漸變和波點*/ 130 .bodian{ 131 width:600px; 132 height:400px; 133 background: #665; 134 background-image: radial-gradient(tan 30%,transparent 0); 135 background-size: 30px 30px; 136 } 137 .bodian2{ 138 width:600px; 139 height:400px; 140 background: #665; 141 background-image: radial-gradient(tan 30%,transparent 0),radial-gradient(tan 30%,transparent 0); 142 background-size:30px 30px; 143 background-position: 0 0,15px 15px; 144 } 145 146 /*棋盤*/ 147 .sanjiaowen{ 148 width:600px; 149 height:400px; 150 background: #eee; 151 background-image: linear-gradient(45deg,#bbb 50%,transparent 0); 152 background-size: 30px 30px; 153 } 154 .qipan1{ 155 width:600px; 156 height:400px; 157 background: #eee; 158 background-image: linear-gradient(45deg,#bbb 25%,transparent 0); 159 background-size: 30px 30px; 160 } 161 .qipan2{ 162 width:600px; 163 height:400px; 164 background: #eee; 165 background-image: linear-gradient(45deg,transparent 75%,#bbb 0); 166 background-size: 30px 30px; 167 } 168 .qipan3{ 169 width:600px; 170 height:400px; 171 background: #eee; 172 background-image: linear-gradient(45deg,transparent 75%,#bbb 0),linear-gradient(45deg,#bbb 25%,transparent 0); 173 background-size: 30px 30px; 174 background-position: 0 0,15px 15px; 175 } 176 .qipan4{ 177 width:600px; 178 height:400px; 179 background: #eee; 180 background-image: linear-gradient(45deg,transparent 75%,#bbb 0), 181 linear-gradient(45deg,#bbb 25%,transparent 0), 182 linear-gradient(45deg,transparent 75%,#bbb 0), 183 linear-gradient(45deg,#bbb 25%,transparent 0); 184 background-size: 30px 30px; 185 background-position: 0 0,15px 15px,15px 15px,30px 30px; 186 } 187 .qipan5{ 188 width:600px; 189 height:400px; 190 background: #eee; 191 background-image:linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0), 192 linear-gradient(45deg,rgba(0,0,0,.25) 25%,transparent 0,transparent 75%,rgba(0,0,0,.25) 0); 193 background-size: 30px 30px; 194 background-position: 0 0,15px 15px; 195 } 196 197 /*角向漸變*/ 198 .jiaoxiangjianbian{ 199 width:400px; 200 height:400px; 201 border:1px solid red; 202 background: conic-gradient(red,yellow,lime,aqua,blue,fuchsia,red); 203 } 204 /*偽隨機背景*/ 205 .suijibeijing1{ 206 width:600px; 207 height:400px; 208 border:1px solid red; 209 background:linear-gradient(90deg,#fb3 15%,#655 0,#655 40%,#ab4 0,#ab4 65%,hsl(20,40%,90%) 0); 210 background-size: 80px 100%; 211 } 212 .suijibeijing2{ 213 width:600px; 214 height:400px; 215 background:hsl(20,40%,90%); 216 border:1px solid red; 217 background-image:linear-gradient(90deg,#fb3 10px,transparent 0), 218 linear-gradient(90deg,#ab4 20px,transparent 0), 219 linear-gradient(90deg,#655 20px,transparent 0); 220 /*這里跟上一個的設置不同之處在於，在上邊的基礎上，把兩個同顏色框之間距離最大的那個顏色（通常也是最窄的那個）做成背景顏色，其他漸變 221 但還是看不到偽隨機的效果，要達到隨機效果，就要讓尺寸取最大的最小公倍數*/ 222 background-size: 80px 100%,60px 100%,40px 100%; 223 } 224 .suijibeijing3{ 225 width:600px; 226 height:400px; 227 background:hsl(20,40%,90%); 228 border:1px solid red; 229 background-image:linear-gradient(90deg,#fb3 11px,transparent 0), 230 linear-gradient(90deg,#ab4 23px,transparent 0), 231 linear-gradient(90deg,#655 41px,transparent 0); 232 background-size: 41px 100%,63px 100%,79px 100%; 233 } 234 /*連續的圖像邊框*/ 235 .lianxubiankuang{ 236 width:600px; 237 height:400px; 238 padding:1em; 239 border:1em solid transparent; 240 background: linear-gradient(white,white),url("4.jpg"); 241 background-size: cover; 242 background-clip: padding-box,border-box; 243 background-origin: border-box; 244 245 /* 簡寫方式： 246 padding:1em; 247 border:1em solid transparent; 248 background:linear-gradient(white,white) padding-box,url("4.jpg") border-box 0 / cover; 249 */ 250 } 251 252 /*老式信封*/ 253 .laoshixinfeng{ 254 width:600px; 255 height:400px; 256 padding:1em; 257 border:1em solid transparent; 258 background: linear-gradient(white,white) padding-box, 259 repeating-linear-gradient(-45deg,red 0,red 12.5%,transparent 0,transparent 25%,#58a 0,#58a 37.5%,transparent 0,transparent 50%) 0 / 5em 5em; 260 } 261 262 /*螞蟻行軍*/ 263 @keyframes ants{ 264 to { 265 background-position: 100%; 266 } 267 } 268 .mayixingjun{ 269 width:600px; 270 height:400px; 271 padding:1em; 272 border:1px solid transparent; 273 background: linear-gradient(white,white) padding-box, 274 repeating-linear-gradient(-45deg,black 0,black 25%,white 0,white 50%) 0 / 0.6em .6em; 275 animation:ants 12s linear infinite; 276 } 277 278 /*平行四邊形*/ 279 .parallelogram{ 280 width:300px; 281 height: 200px; 282 transform:skewX(-45deg); 283 border:1px solid red; 284 background: yellowgreen; 285 } 286 .parallelogram2{ 287 width:300px; 288 height: 200px; 289 position: relative; 290 } 291 .parallelogram2::before{ 292 position: absolute; 293 top:0; 294 left:0; 295 bottom:0; 296 right:0; 297 background: red; 298 border:1px solid blue; 299 z-index:-1; 300 content: ''; 301 transform: skewX(-45deg); 302 } 303 304 /*菱形圖片*/ 305 .diamond{ 306 clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); 307 transition: 1s clip-path; 308 } 309 .diamond:hover{ 310 clip-path: polygon(0 0,0 100%,100% 100%, 100% 0); 311 } 312 313 /*切角*/ 314 .qiejiao{ 315 width:600px; 316 height:400px; 317 background: #58a; 318 background: linear-gradient(135deg,transparent 15px,#58a 0) top left, 319 linear-gradient(-135deg,transparent 15px,#58a 0) top right, 320 linear-gradient(45deg,transparent 15px,#58a 0) bottom left, 321 linear-gradient(-45deg,transparent 15px,#58a 0) bottom right; 322 background-size: 50% 50%; 323 background-repeat:no-repeat; 324 } 325 /*內凹圓角*/ 326 .qiejiao2{ 327 width:200px; 328 height: 100px; 329 background: #58a; 330 background: radial-gradient(circle at top left,transparent 15px ,#58a 0) top left, 331 radial-gradient(circle at top right,transparent 15px ,#58a 0) top right, 332 radial-gradient(circle at bottom left,transparent 15px ,#58a 0) bottom left, radial-gradient(circle at bottom right,transparent 15px ,#58a 0) bottom right; 333 background-size: 50% 50%; 334 background-repeat:no-repeat; 335 } 336 /*小三角形*/ 337 .xiaosanjiao{ 338 width:10px; 339 height:60px; 340 border:1px solid red; 341 background: linear-gradient(-45deg,red 0,red 50%,transparent 0,transparent 100%); 342 } 343 /*梯形標簽頁*/ 344 .tixing{ 345 width:100px; 346 height:20px; 347 position: relative; 348 } 349 .tixing::before{ 350 content: ''; 351 position: absolute; 352 top:0; 353 bottom:0; 354 right:0; 355 left:0; 356 z-index:-1; 357 /*以底線為基准旋轉*/ 358 transform-origin:bottom; 359 transform:scaleY(1.3) perspective(.5em) rotateX(5deg); 360 background: mediumvioletred; 361 } 362 /*餅圖*/ 363 .pie{ 364 width:400px; 365 height:400px; 366 border-radius: 50%; 367 background: yellowgreen; 368 background-image: linear-gradient(to right,transparent 50%,#655 0); 369 } 370 /*下面的偽元素旋轉可實現0%-50%之間的餅圖，要50%-100%之間的餅圖需要改變偽元素的顏色，反向旋轉*/ 371 .pie::before{ 372 content: ''; 373 display: block; 374 margin-left: 50%; 375 height:100%; 376 border-radius: 0 100% 100% 0 / 50%; 377 background-color: inherit; 378 transform-origin: left; 379 border:1px solid red; 380 transform:rotate(.1turn) 381 } 382 /*0.5-1之間的靜態餅圖*/ 383 .pie2{ 384 width:400px; 385 height:400px; 386 border-radius: 50%; 387 background: yellowgreen; 388 background-image: linear-gradient(to right,transparent 50%,#655 0); 389 } 390 391 .pie2::before{ 392 content: ''; 393 display: block; 394 margin-left: 50%; 395 height:100%; 396 border-radius: 0 100% 100% 0 / 50%; 397 background-color:#655; 398 transform-origin: left; 399 border:1px solid red; 400 transform:rotate(.1turn) 401 } 402 /*可以訪問的的餅圖*/ 403 .pie3{ 404 position: relative; 405 width:400px; 406 height:400px; 407 line-height: 400px; 408 border-radius: 50%; 409 background: yellowgreen; 410 background-image: linear-gradient(to right,transparent 50%,#655 0); 411 color: transparent; 412 text-align: center; 413 } 414 @keyframes spin{ 415 to { 416 transform: rotate(.5turn); 417 } 418 } 419 @keyframes bg { 420 50% { 421 background: #655; 422 } 423 } 424 425 .pie3::before{ 426 content: ''; 427 position: absolute; 428 top:0; 429 left:50%; 430 width:50%; 431 height:100%; 432 border-radius: 0 100% 100% 0 / 50%; 433 background-color: inherit; 434 transform-origin: left; 435 animation:spin 50s linear infinite, 436 bg 100s step-end infinite; 437 animation-play-state: paused; 438 animation-delay: inherit; 439 border:1px solid red; 440 } 441 442 /*svg畫餅圖*/ 443 .svg circle{ 444 fill:yellowgreen; 445 stroke:#655; 446 stroke-width: 32; 447 stroke-dasharray: 20 10; 448 /*得到比例為38%的扇區*/ 449 } 450 451 .svg2{ 452 width:100px; 453 height:100px; 454 transform: rotate(-90deg); 455 border-radius: 50%; 456 } 457 .svg2 circle{ 458 fill:yellowgreen; 459 stroke:#655; 460 stroke-width: 32; 461 stroke-dasharray: 38 100; 462 } 463 464 /*單邊陰影*/ 465 .shadow{ 466 width:600px; 467 height:300px; 468 border:1px solid blue; 469 /*第四個參數是擴張半徑，擴大或縮小投影的尺寸*/ 470 box-shadow: -5px 0px 4px -2px black ; 471 } 472 /*鄰邊陰影*/ 473 .shadow2{ 474 width:600px; 475 height:300px; 476 border:1px solid blue; 477 box-shadow: 5px 5px 4px -2px black ; 478 } 479 /*對邊陰影*/ 480 .shadow3{ 481 width:600px; 482 height:300px; 483 border:1px solid blue; 484 box-shadow: 5px 0px 4px -2px black,-5px 0px 4px -2px black; 485 } 486 487 /*濾鏡染色*/ 488 .filter{ 489 width:600px; 490 height:400px; 491 } 492 .filter img{ 493 filter:sepia(1); 494 /*filter:saturate(4);*/ 495 /*filter:hue-rotate(295deg);*/ 496 } 497 .filter img:hover{ 498 filter:none; 499 } 500 501 /*混合模式染色*/ 502 .mixmodel{ 503 background: blue; 504 width:600px; 505 height:400px; 506 } 507 .mixmodel img{ 508 mix-blend-mode: luminosity; 509 } 510 .mixmodel:hover{ 511 background: transparent; 512 /* 還有一種方法不需要img標簽，用背景顏色和背景圖片 進行 backgrund-blend-mode:luminosity;進行混合*/ 513 } 514 515 /*毛玻璃效果*/ 516 /*http://play.csssecrets.io/frosted-glass 這里可以看到明顯效果*/ 517 .maoboli{ 518 width:600px; 519 height:400px; 520 521 } 522 .maoboli > p{ 523 width:300px; 524 height:100px; 525 526 margin:20% auto ; 527 position: relative; 528 background: hsla(0,0%,100%,.3); 529 /*overflow: hidden;*/ 530 } 531 .maoboli p::before{ 532 content: ''; 533 position: absolute; 534 top:0;left:0; 535 bottom:0; 536 right:0; 537 /*background: rgba(255,0,0,0.5);*/ 538 border:1px solid blue; 539 z-index:-1; 540 filter:blur(20px); 541 margin:-30px; 542 } 543 .maoboli,.maoboli >p::before{ 544 background: url("./3.jpg") 0 / cover fixed; 545 } 546 547 /*折角效果*/ 548 .zhejiao{ 549 width:500px; 550 height:300px; 551 background: #58a; 552 background:linear-gradient(to left bottom,transparent 50%,rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em, 553 linear-gradient(-135deg,transparent 1.5em,#58a 0); 554 } 555 556 /* 文本換行 */ 557 .huanhang{ 558 width:400px; 559 height:200px; 560 border:1px solid red; 561 } 562 .huanhang dd,.huanhang dt{ 563 display: inline; 564 border:1px solid blue; 565 } 566 dd{ 567 font-weight: bolder; 568 } 569 .huanhang dd + dt::before{ 570 content: '\A'; 571 white-space: pre; 572 } 573 .huanhang dd + dd::before{ 574 content: ', '; 575 font-weight: normal; 576 } 577 578 /* 文本行斑馬條紋*/ 579 .banmatiaowen{ 580 width:200px; 581 height:auto; 582 line-height: 1.5; 583 border:1px solid green; 584 padding:.5em; 585 background: beige; 586 background: linear-gradient(rgba(0,0,0,.2) 50%,transparent 0); 587 background-size: auto 3em; 588 background-origin: content-box; 589 } 590 591 /*發光文字*/ 592 .faguangwenzi{ 593 font-size: 50px; 594 font-weight: bolder; 595 color: #ffc; 596 text-shadow:0 0 .1em,0 0 .3em; 597 background: #000000; 598 /*還可以加模糊濾鏡 blur(3px)實現*/ 599 } 600 601 /*svg空心字*/ 602 h1{ 603 font:500%/1 Rockwell ,serif; 604 background: deeppink; 605 color: white; 606 } 607 h1 text{ 608 fill:currentColor; 609 } 610 h1 svg{ 611 overflow: visible; 612 } 613 h1 use{ 614 stroke: black; 615 stroke-width: 6; 616 stroke-linejoin: round; 617 } 618 619 /*環形文字*/ 620 .circular path{ 621 fill:none; 622 } 623 .circular{ 624 width:10em;height:10em; 625 margin:3em auto 0; 626 } 627 .circular svg{ 628 display: block; 629 overflow: visible; 630 } 631 632 /*擴大可點擊區域*/ 633 /*一種方法是利用透明border，但是會讓按鈕變大，這時候設置 background-clip:padding-box;，如果按鈕要加邊框就要用內嵌陰影了 box-shadow：inner*/ 634 /*還有一種是利用偽元素：透明，用定位拉伸，擴大點擊區域*/ 635 /*邊框擴大可點擊區域*/ 636 .borderkuoda{ 637 width:50px; 638 height:50px; 639 background: red; 640 /*邊框擴大點擊區域*/ 641 border:10px solid transparent; 642 background-clip: padding-box; 643 } 644 .borderkuoda:active{ 645 background: greenyellow; 646 background-clip: padding-box; 647 /*鼠標光標設置為cursor：not-allowed，提示用戶不能選中。*/ 648 cursor: not-allowed; 649 } 650 651 /*偽元素擴大可點擊區域*/ 652 .kuodadianji{ 653 width:50px; 654 height:50px; 655 background: red; 656 position: relative; 657 } 658 .kuodadianji:active{ 659 background: blue; 660 } 661 .kuodadianji::after{ 662 content: ''; 663 position: absolute; 664 top:-10px; 665 left:-10px; 666 right:-10px; 667 bottom:-10px; 668 border:1px solid blue; 669 } 670 671 /*自定義復選框*/ 672 /*默認樣式*/ 673 .definefuxuankuang input[type="checkbox"] + label::before{ 674 content: '\a0'; /* 這個表示不換行空格 */ 675 display:inline-block; 676 vertical-align: .2em; 677 width:.8em; 678 height:.8em; 679 margin-right: .2em; 680 border-radius: .2em; 681 background: silver; 682 text-indent: .15em; 683 line-height: .65; 684 } 685 /*勾選樣式*/ 686 /*通過 focus和disabled 也可以設置 聚焦和禁用狀態的樣式*/ 687 .definefuxuankuang input[type="checkbox"]:checked + label::before{ 688 content: '\2713'; /*對勾*/ 689 background: yellowgreen; 690 } 691 /*隱藏掉原來的復選框*/ 692 693 .definefuxuankuang input[type="checkbox"]{ 694 position: absolute; 695 clip:rect(0,0,0,0); 696 } 697 698 /*開關式按鈕*/ 699 .kaiguan input{ 700 position: absolute; 701 clip:rect(0,0,0,0); 702 } 703 .kaiguan label{ 704 display: inline-block; 705 padding:.3em .5em; 706 background: #ccc; 707 background-image: linear-gradient(#ddd,#bbb); 708 border:1px solid rgba(0,0,0,.2); 709 border-radius: .3em; 710 box-shadow: 0 1px white inset; 711 text-align: center; 712 text-shadow: 0 1px 1px white; 713 } 714 .kaiguan input:checked + label,.kaiguan input:active + label{ 715 box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset; 716 border-color: rgba(0,0,0,.3); 717 background: #bbb; 718 } 719 720 /*內容決定寬度*/ 721 figure{ 722 max-width: 300px; 723 max-width:min-content; 724 margin:auto; 725 } 726 figure > img { 727 max-width: inherit; /* 這條不會生效*/ 728 } 729 </style> 730 </head> 731 <body> 732 <div class="box"></div> 733 <div class="supports"></div> 734 735 <div class="reduceCode">YESmdksmdk! 736 <hr></div> 737 <div class="box1"></div> 738 <div class="borderimg">hahah</div> 739 <div class="backgroudpos"></div> 740 741 <div class="calc"></div> 742 743 <div class="f"> 744 <div class="s">calc屬性計算百分比和像素值</div> 745 </div> 746 747 <!--4，圓角--> 748 <div class="radius">內圓角</div> 749 750 <!--條紋背景--> 751 <div class="gradient">條紋背景</div> 752 753 <!--線性漸變與網格--> 754 <div class="wangge">網格色塊</div> 755 <div class="wangge2">網格線</div> 756 <div class="wangge3">藍圖網格</div> 757 758 <!--徑向漸變和波點--> 759 <div class="bodian">波點</div> 760 <div class="bodian2">可以作為背景的斜波點</div> 761 762 <div class="sanjiaowen">三角紋</div> 763 <div class="qipan1">棋盤1</div> 764 <div class="qipan2">棋盤2</div> 765 <div class="qipan3">棋盤3</div> 766 <div class="qipan4">棋盤4</div> 767 <div class="qipan5">棋盤5</div> 768 769 <!--角向漸變--> 770 <div class="jiaoxiangjianbian">角向漸變(沒有瀏覽器支持)</div> 771 <!--偽隨機背景--> 772 <div class="suijibeijing1">偽隨機背景1</div> 773 <div class="suijibeijing2">偽隨機背景2</div> 774 <div class="suijibeijing3">偽隨機背景3（最終的偽隨機效果）</div> 775 776 777 <!--連續圖像邊框--> 778 <div class="lianxubiankuang">連續的圖像邊框</div> 779 <!--老式信封邊框--> 780 <div class="laoshixinfeng"></div> 781 782 <!--螞蟻行軍邊框--> 783 <div class="mayixingjun">螞蟻行軍邊框</div> 784 785 <!--平行四邊形--> 786 <div class="parallelogram">平行四邊形(文字也變傾斜了 )</div> 787 <div class="parallelogram2">平行四邊形(文字不傾斜 )</div> 788 789 <!--菱形--> 790 <img class="diamond" src="4.jpg"></img> 791 <!--切角效果--> 792 <div class="qiejiao">切角效果</div> 793 <div class="qiejiao2">切角效果2</div> 794 795 <!-- 畫個長條的三角形--> 796 <div class="xiaosanjiao">小三角</div> 797 798 <!--梯形標簽頁--> 799 <div class="tixing">梯形標簽頁</div> 800 <!--餅圖--> 801 <div class="pie">餅圖0-0.5</div> 802 <div class="pie2">餅圖0.5-1</div> 803 <div class="pie3">40%</div> 804 <!--svg 畫餅圖--> 805 <svg class="svg"> 806 <circle r="30" cx="50" cy="50" /> 807 </svg> 808 <svg class="svg2" viewBox="0 0 32 32"> 809 <circle r="16" cx="16" cy="16" /> 810 </svg> 811 812 <!--js結合svg畫餅--> 813 <div class="svg3">20%</div> 814 815 <!--單邊陰影--> 816 <div class="shadow">單邊陰影</div> 817 818 <!--鄰邊陰影--> 819 <div class="shadow2">鄰邊陰影</div> 820 <!--對邊陰影--> 821 <div class="shadow3">對邊陰影</div> 822 823 <div>不規則圖形的投影，可以使用濾鏡 filter:drop-shadow(2px 2px 10px red);這個參數基本與box-shadow的參數相同。</div> 824 825 <!--濾鏡染色效果--> 826 <div class="filter"><img src="./2.jpg" alt=""></div> 827 828 <!-- 混合模式染色--> 829 <div class="mixmodel"><img src="./2.jpg" alt=""></div> 830 831 <!--毛玻璃效果--> 832 <div class="maoboli"> 833 834 <p> 看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字看文字 835 看文字看文字看文字看文字看文字</p> 836 </div> 837 838 <!--折角效果--> 839 <div class="zhejiao"></div> 840 841 <!-- 文本換行 --> 842 <div> 843 <ol class="huanhang"> 844 <dt>Name</dt> 845 <dd>chance</dd> 846 <dt>email</dt> 847 <dd>123@126.com</dd> 848 <dd>456@126.com</dd> 849 <dt>address</dt> 850 <dd>china</dd> 851 </ol> 852 </div> 853 <!--文本行斑馬條紋--> 854 <div class="banmatiaowen"> 855 這是一行文本 <br> 856 這是一行文本 <br> 857 這是一行文本 <br> 858 這是一行文本 <br> 859 這是一行文本 <br> 860 這是一行文本 <br> 861 </div> 862 863 <!--改變tab的寬度--> 864 <div>代碼要寫在pre 或code標簽中，設置tab的寬度通過 tab-size:4; 設為0表示禁用，瀏覽器默認設置為8個。</div> 865 866 <!--文字發光效果--> 867 <div class="faguangwenzi">glow</div> 868 <!--svg空心字--> 869 <h1> 870 <svg width="2em",height="1.2em"> 871 <use xlink:href="#css" /> 872 <text id="css" y="1em">css</text> 873 </svg> 874 </h1> 875 876 <!--環形文字--> 877 <div class="circular"> 878 <svg viewBox="0 0 100 100"> 879 <path d="M 0,50 a 50,50 0 1,1 0,1 z" id="circle"/> 880 <text> 881 <textpath xlink:href="#circle"> 882 circular reasoning works because 883 </textpath> 884 </text> 885 </svg> 886 </div> 887 888 <!--邊框擴大可點擊區域--> 889 <div class="borderkuoda"> 890 + 891 </div> 892 <!--偽元素擴大可點擊區域--> 893 <div class="kuodadianji">-</div> 894 <br> 895 <!--自定義單選框，復選框--> 896 <div class="definefuxuankuang"> 897 <input type="checkbox" id="awesome" /> 898 <label for="awesome">Awesome!!</label> 899 </div> 900 <!--開關按鈕--> 901 <div class="kaiguan"> 902 <input type="checkbox" id="kaiguan" /> 903 <label for="kaiguan">開關按鈕，一般慎用，容易跟普通按鈕混淆</label> 904 </div> 905 906 <!--內容決定寬度--> 907 <div class="contentwidth"> 908 <p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p> 909 <figure> 910 <img src="./2.jpg" alt=""> 911 <figcaption> 912 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 圖片介紹 913 </figcaption> 914 </figure> 915 <p>最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行最后一行</p> 916 </div> 917 <script> 918 919 var root = document.documentElement; 920 console.log(root); 921 if("backgroundColor" in root.style){ 922 console.log("had") 923 }else{ 924 console.log("not had") 925 } 926 927 928 function $$(selector,context){ 929 context = context || document; 930 var elements = context.querySelectorAll(selector); 931 return Array.prototype.slice.call(elements); 932 } 933 //把餅圖的百分比文本 轉換成 animation-delay 934 $$(".pie3").forEach(function(pie){ 935 var p = parseFloat(pie.textContent); 936 pie.style.animationDelay = "-" + p + "s"; 937 }) 938 939 //js結合svg畫餅 940 $$(".svg3").forEach(function(pie){ 941 var p = parseFloat(pie.textContent); 942 var NS = "http://www.w3.org/2000/svg"; 943 var svg = document.createElementNS(NS,"svg"); 944 var circle = document.createElementNS(NS,"circle"); 945 var title = document.createElementNS(NS,"title"); 946 circle.setAttribute("r",16); 947 circle.setAttribute("cx",16); 948 circle.setAttribute("cy",16); 949 circle.setAttribute("stroke","#655"); 950 circle.setAttribute("stroke-width",32); 951 circle.setAttribute("stroke-dasharray",p+" 100"); 952 svg.setAttribute("viewBox","0 0 32 32"); 953 svg.style.borderRadius ="50%"; 954 circle.style.fill = "yellowgreen"; 955 title.textContent = pie.textContent; 956 pie.textContent = ""; 957 svg.appendChild(title); 958 svg.appendChild(circle); 959 pie.appendChild(svg); 960 }) 961 </script> 962 </body> 963 </html>