用css3实现一个带缺口的圆圈(图)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ margin:300px; position:relative; } .box1 { width:100px; height:100px; background-color:transparent; border:3px solid #F00; border-radius:60px; margin-top:20px; } .box2 { width:60px; height:60px; background-color:#fff; z-index:1; border-radius:45px; position:absolute; top:0; left:80px; } </style> </head> <body> <div class="box"> <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
效果图:
作者:小坏
出处:http://tnnyang.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。