CSS 实现彩色边框效果
CSS3
新增了box-shadow
,用于设置盒子的阴影,今天玩了一下!纯 CSS 实现的彩色边框效果。
效果展示:
完整代码如下:
<!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> div.one div { width: 100px; height: 100px; margin: 50px auto; background-color: rgb(245, 234, 234); box-shadow: 10px 0 15px -2px rgb(11, 11, 235), 0 -10px 15px -2px rgb(103, 167, 8), -10px 0 15px -2px rgb(228, 64, 4), 0 10px 15px -2px rgb(241, 7, 132); } div.one div:nth-of-type(1) { border-radius: 5%; } div.one div:nth-of-type(2) { border-radius: 30%; } div.one div:nth-of-type(3) { border-radius: 50%; } </style> </head> <body> <div class="one"> <div></div> <div></div> <div></div> </div> </body> </html>
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » CSS 实现彩色边框效果
码云笔记 » CSS 实现彩色边框效果