向 div 元素添加圆角边框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .border-radius{ border-radius: 10px 20px 30px 20px; width: 100px; height: 100px; background-color: greenyellow; } .border-circle{ border-radius: 50px; width: 100px; height: 100px; background-color: gold; } .border-up-semi-circle{ border-radius: 50px 50px 0 0; width: 100px; height: 50px; 0px; background-color: goldenrod; } .border-down-semi-circle{ border-radius: 0px 0px 50px 50px; width: 100px; height: 50px; 0px; background-color: red; } .circle-box{ width: 100px; height: 100px; } .borde-up-left-semicircle{ border-radius: 50px 0px 0px 0px; width: 50px; height: 50px; 0px; background-color: green; float: left; } .borde-up-right-semicircle{ border-radius: 0px 50px 0px 0px; width: 50px; height: 50px; 0px; background-color: yellow; float: left; } .borde-down-right-semicircle{ border-radius: 0px 0px 50px 0px; width: 50px; height: 50px; 0px; background-color: red; float: left; } .borde-down-left-semicircle{ border-radius: 0px 0px 0px 50px; width: 50px; height: 50px; 0px; background-color: orange; float: left; } </style> </head> <body> <div class="border-radius"></div> <div class="border-circle"></div> <div class="border-up-semi-circle"></div> <div class="border-down-semi-circle"></div> <div class="circle-box"> <div class="borde-up-left-semicircle"></div> <div class="borde-up-right-semicircle"></div> <div class="borde-down-left-semicircle"></div> <div class="borde-down-right-semicircle"></div> </div> </body> </html>效果图:
请您注意
·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款