1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3 边框</title> 6 <style> 7 body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { 8 margin: 0; 9 padding: 0; 10 } 11 12 body { 13 background-color: #F7F7F7; 14 } 15 16 .wrapper { 17 width: 1000px; 18 margin: 0 auto; 19 padding: 20px; 20 box-sizing: border-box; 21 } 22 23 header { 24 padding: 20px 0; 25 margin-bottom: 20px; 26 text-align: center; 27 } 28 29 header h3 { 30 line-height: 1; 31 font-weight: normal; 32 font-size: 28px; 33 } 34 35 .main { 36 /*overflow: hidden;*/ 37 } 38 39 .main:after { 40 content: ''; 41 clear: both; 42 display: block; 43 } 44 45 .main .item { 46 width: 210px; 47 height: 210px; 48 margin: 0 30px 30px 0; 49 display: flex; 50 position: relative; 51 background-color: #FFF; 52 float: left; 53 box-shadow: 2px 2px 5px #CCC; 54 } 55 56 .main .item:after { 57 content: attr(data-brief); 58 display: block; 59 width: 100%; 60 height: 100%; 61 text-align: center; 62 line-height: 210px; 63 position: absolute; 64 top: 0; 65 left: 0; 66 color: #FFF; 67 font-family: '微软雅黑'; 68 font-size: 18px; 69 background-color: rgba(170, 170, 170, 0); 70 z-index: -1; 71 transition: all 0.3s ease-in; 72 } 73 74 .main .item:hover:after { 75 background-color: rgba(170, 170, 170, 0.6); 76 z-index: 100; 77 } 78 79 .main .item:nth-child(4n) { 80 margin-right: 0; 81 } 82 83 /*.main .item:nth-last-child(-n+5) { 84 margin-bottom: 0; 85 }*/ 86 87 /* 以上是骨架样式 */ 88 /* 1、2、3、4 顺时针 */ 89 .border-radius { 90 width: 180px; 91 height: 180px; 92 margin: auto; 93 border: 1px solid red; 94 /*border-radius: 50% 30% 20%;*/ 95 } 96 97 .square { 98 border-radius: 0; 99 } 100 101 /*拱形*/ 102 .item:nth-child(1) .border-radius { 103 border-radius: 90px; 104 } 105 106 /*拱形*/ 107 .item:nth-child(2) .border-radius { 108 border-radius: 90px 90px 0 0; 109 } 110 111 /*半圆*/ 112 .item:nth-child(3) .border-radius { 113 height: 90px; 114 border-radius: 90px 90px 0 0; 115 } 116 117 /*左上角*/ 118 .item:nth-child(4) .border-radius { 119 /*height: 90px;*/ 120 border-radius: 90px 0 0 0; 121 } 122 123 /*四分之一圆*/ 124 .item:nth-child(5) .border-radius { 125 width: 90px; 126 height: 90px; 127 border-radius: 90px 0 0 0; 128 } 129 130 /*横着的椭圆*/ 131 .item:nth-child(6) .border-radius { 132 height: 90px; 133 /*border-radius: 50%;*/ 134 border-radius: 90px 90px 90px 90px / 45px 45px 45px 45px; 135 /*border-radius: 45px / 90px;*/ 136 } 137 138 /*竖着的椭圆*/ 139 .item:nth-child(7) .border-radius { 140 width: 90px; 141 border-radius: 45px 45px 45px 45px / 90px 90px 90px 90px; 142 } 143 144 /*半个横着的椭圆*/ 145 .item:nth-child(8) .border-radius { 146 height: 45px; 147 border-radius: 90px 90px 0 0 / 45px 45px 0 0; 148 } 149 150 /*半个竖着的椭圆*/ 151 .item:nth-child(9) .border-radius { 152 width: 45px; 153 border-radius: 45px 0 0 45px / 90px 0 0 90px; 154 } 155 156 /*四分之一竖着的椭圆*/ 157 .item:nth-child(10) .border-radius { 158 width: 45px; 159 height: 90px; 160 border-radius: 45px 0 0 0 / 90px 0 0 0; 161 } 162 163 /*饼环*/ 164 .item:nth-child(11) .border-radius { 165 width: 40px; 166 height: 40px; 167 border: 70px solid red; 168 border-radius: 90px; 169 } 170 171 /*圆饼*/ 172 .item:nth-child(12) .border-radius { 173 width: 40px; 174 height: 40px; 175 border: 70px solid red; 176 border-radius: 60px; 177 } 178 179 /*左上角圆饼*/ 180 .item:nth-child(13) .border-radius { 181 width: 60px; 182 height: 60px; 183 border: 60px solid red; 184 border-radius: 90px 0 0 0; 185 } 186 187 /*对角圆饼*/ 188 .item:nth-child(14) .border-radius { 189 width: 60px; 190 height: 60px; 191 border: 60px solid red; 192 border-radius: 90px 0 90px 0; 193 } 194 195 /*四边不同色*/ 196 .item:nth-child(15) .border-radius { 197 width: 0px; 198 height: 0px; 199 border-width: 90px; 200 border-style: solid; 201 border-color: red green yellow blue; 202 } 203 204 /*右透明色*/ 205 .item:nth-child(16) .border-radius { 206 width: 0px; 207 height: 0px; 208 border-width: 90px; 209 border-style: solid; 210 border-color: red green yellow blue; 211 border-right-color: transparent; 212 } 213 214 /*圆右透明色*/ 215 .item:nth-child(17) .border-radius { 216 width: 0px; 217 height: 0px; 218 border-width: 90px; 219 border-style: solid; 220 border-color: red; 221 border-right-color: transparent; 222 border-radius: 90px; 223 } 224 225 /*圆右红透明色*/ 226 .item:nth-child(18) .border-radius { 227 width: 0px; 228 height: 0px; 229 border-width: 90px; 230 border-style: solid; 231 border-color: transparent; 232 border-right-color: red; 233 border-radius: 90px; 234 } 235 236 /*阴阳图前世*/ 237 .item:nth-child(19) .border-radius { 238 width: 180px; 239 height: 0px; 240 border-top-width: 90px; 241 border-bottom-width: 90px; 242 border-style: solid; 243 border-top-color: red; 244 border-bottom-color: green; 245 /*border-right-color: red;*/ 246 border-radius: 90px; 247 } 248 249 /*阴阳图前世2*/ 250 .item:nth-child(20) .border-radius { 251 width: 180px; 252 height: 90px; 253 border-bottom-width: 90px; 254 border-style: solid; 255 border-bottom-color: green; 256 background-color: red; 257 /*border-right-color: red;*/ 258 border-radius: 90px; 259 } 260 261 /*阴阳图今生*/ 262 .item:nth-child(21) .border-radius { 263 width: 180px; 264 height: 90px; 265 border-bottom-width: 90px; 266 border-style: solid; 267 border-bottom-color: green; 268 background-color: red; 269 border-radius: 90px; 270 position: relative; 271 } 272 273 .item:nth-child(21) .border-radius::after, 274 .item:nth-child(21) .border-radius::before { 275 content: ''; 276 position: absolute; 277 top: 50%; 278 width: 20px; 279 height: 20px; 280 /*margin: -10px 0 0 0;*/ 281 border-width: 35px; 282 border-style: solid; 283 border-radius: 45px; 284 } 285 286 /*左阴阳*/ 287 .item:nth-child(21) .border-radius::after { 288 background-color: red; 289 border-color: green; 290 } 291 292 /*右阴阳*/ 293 .item:nth-child(21) .border-radius::before { 294 background-color: green; 295 border-color: red; 296 right: 0; 297 } 298 299 /*右阴阳*/ 300 .item:nth-child(22) .border-radius { 301 width: 180px; 302 height: 90px; 303 border-bottom-width: 90px; 304 border-bottom-color: green; 305 border-bottom-style: solid; 306 background-color: red; 307 border-radius: 90px; 308 position: relative; 309 } 310 311 .item:nth-child(22) .border-radius::after, 312 .item:nth-child(22) .border-radius::before { 313 content: ''; 314 position: absolute; 315 top: 50%; 316 width: 20px; 317 height: 20px; 318 border-width: 35px; 319 border-style: solid; 320 border-radius: 45px; 321 } 322 323 .item:nth-child(22) .border-radius::before { 324 border-color: green; 325 background-color: red; 326 } 327 328 .item:nth-child(22) .border-radius::after { 329 right: 0; 330 border-color: red; 331 background-color: green; 332 } 333 334 /*消息框*/ 335 .item:nth-child(23) .border-radius { 336 width: 160px; 337 height: 80px; 338 background-color: red; 339 border-radius: 6px; 340 position: relative; 341 } 342 343 .item:nth-child(23) .border-radius::after { 344 content: ''; 345 width: 0; 346 height: 0; 347 border-width: 10px; 348 border-style: solid; 349 border-color: transparent; 350 border-right-color: red; 351 position: absolute; 352 top: 16px; 353 left: -20px; 354 } 355 356 /*奇怪的图形*/ 357 .item:nth-child(24) .border-radius { 358 width: 40px; 359 height: 40px; 360 border-width: 45px 0 45px 70px; 361 border-style: solid; 362 border-radius: 0 0 60px 0; 363 border-color: red; 364 } 365 366 /*奇怪的图形2*/ 367 .item:nth-child(25) .border-radius { 368 width: 100px; 369 height: 40px; 370 border-width: 45px 20px 45px 70px; 371 border-style: solid; 372 border-radius: 60px; 373 border-color: red; 374 } 375 376 /*QQ对话*/ 377 .item:nth-child(26) .border-radius { 378 width: 160px; 379 height: 80px; 380 background-color: red; 381 border-radius: 6px; 382 position: relative; 383 } 384 385 .item:nth-child(26) .border-radius::after { 386 content: ''; 387 position: absolute; 388 top: 0; 389 right: -20px; 390 width: 30px; 391 height: 30px; 392 border-width: 0 0 30px 30px; 393 border-style: solid; 394 border-bottom-color: red; 395 border-left-color: transparent; 396 border-radius: 0 0 60px 0; 397 } 398 399 /*圆角的百分比设置 */ 400 .item:nth-child(27) .border-radius { 401 width: 180px; 402 /*height: 180px;*/ 403 height: 90px; 404 border-radius: 50%; 405 border-radius: 90px/45px; 406 407 /*百分比是按横竖两个对应的方向的长度进行计算*/ 408 } 409 410 </style> 411 </head> 412 <body> 413 <div class="wrapper"> 414 <header> 415 <h3>CSS3 边框圆角</h3> 416 </header> 417 <div class="main"> 418 <div class="item" data-brief="整圆"> 419 <div class="border-radius"></div> 420 </div> 421 <div class="item" data-brief="拱形"> 422 <div class="border-radius"></div> 423 </div> 424 <div class="item" data-brief="半圆"> 425 <div class="border-radius"></div> 426 </div> 427 <div class="item" data-brief="左上角"> 428 <div class="border-radius"></div> 429 </div> 430 <div class="item" data-brief="四分之一圆"> 431 <div class="border-radius"></div> 432 </div> 433 <div class="item" data-brief="横着的椭圆"> 434 <div class="border-radius"></div> 435 </div> 436 <div class="item" data-brief="竖着的椭圆"> 437 <div class="border-radius"></div> 438 </div> 439 <div class="item" data-brief="半个横着的椭圆"> 440 <div class="border-radius"></div> 441 </div> 442 <div class="item" data-brief="半个竖着的椭圆"> 443 <div class="border-radius"></div> 444 </div> 445 <div class="item" data-brief="四分之一竖着的椭圆"> 446 <div class="border-radius"></div> 447 </div> 448 <div class="item" data-brief="饼环"> 449 <div class="border-radius"></div> 450 </div> 451 <div class="item" data-brief="圆饼"> 452 <div class="border-radius"></div> 453 </div> 454 <div class="item" data-brief="左上角圆饼"> 455 <div class="border-radius"></div> 456 </div> 457 <div class="item" data-brief="对角圆饼"> 458 <div class="border-radius"></div> 459 </div> 460 <div class="item" data-brief="四边不同色"> 461 <div class="border-radius"></div> 462 </div> 463 <div class="item" data-brief="右透明色"> 464 <div class="border-radius"></div> 465 </div> 466 <div class="item" data-brief="圆右透明色"> 467 <div class="border-radius"></div> 468 </div> 469 <div class="item" data-brief="圆右红透明色"> 470 <div class="border-radius"></div> 471 </div> 472 <div class="item" data-brief="阴阳图前世"> 473 <div class="border-radius"></div> 474 </div> 475 <div class="item" data-brief="阴阳图前世2"> 476 <div class="border-radius"></div> 477 </div> 478 <div class="item" data-brief="阴阳图今生"> 479 <div class="border-radius"></div> 480 </div> 481 <div class="item" data-brief="阴阳图今生2"> 482 <div class="border-radius"></div> 483 </div> 484 <div class="item" data-brief="消息框"> 485 <div class="border-radius"></div> 486 </div> 487 <div class="item" data-brief="奇怪的图形"> 488 <div class="border-radius"></div> 489 </div> 490 <div class="item" data-brief="奇怪的图形2"> 491 <div class="border-radius"></div> 492 </div> 493 <div class="item" data-brief="QQ对话"> 494 <div class="border-radius"></div> 495 </div> 496 <div class="item" data-brief="圆角百分比"> 497 <div class="border-radius"></div> 498 </div> 499 </div> 500 </div> 501 </body> 502 </html>