CSS 实现多边框效果
利用 CSS3 新增的box-shadow
属性实现多边框效果。
效果展示:
完整代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .two div { width: 80px; height: 80px; margin: 70px auto; background-color: rgb(238, 226, 226); box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(241, 241, 6), 0 0 0 10px rgb(196, 144, 48) inset, 0 0 10px 20px green inset; } .two div:nth-of-type(1) { border-radius: 5%; } .two div:nth-of-type(2) { border-radius: 30%; box-shadow: 0 0 0 10px rgb(243, 8, 8), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(24, 248, 4), 0 0 0 10px rgb(8, 12, 238) inset, 0 0 10px 20px rgb(6, 236, 167) inset; } .two div:nth-of-type(3) { border-radius: 50%; box-shadow: 0 0 0 10px rgb(3, 233, 41), 0 0 0 20px rgb(13, 13, 218), 0 0 0 30px rgb(219, 6, 226), 0 0 0 10px rgb(97, 231, 8) inset, 0 0 10px 20px rgb(201, 198, 16) inset; } </style> </head> <body> <div class="two"> <div></div> <div></div> <div></div> </div> </body> </html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS 实现多边框效果
码云笔记 » CSS 实现多边框效果