首页用html5的盒子做一个棒棒糖的代码

用html5的盒子做一个棒棒糖的代码

时间: 2023-05-14 07:07:13 浏览: 92

盒子模型代码

简单的html代码，盒子模型，只是大概的描述下盒子模型的例子

<!DOCTYPE html> <html> <head> <title>棒棒糖</title> <style> .lollipop { width: 100px; height: 200px; background-color: #ff69b4; border-radius: 50% 50% 0 0; position: relative; margin: 50px auto; overflow: hidden; } .lollipop:before { content: ""; display: block; width: 100%; height: 100%; background-color: #fff; border-radius: 50%; position: absolute; top: -50%; left: 0; } .lollipop:after { content: ""; display: block; width: 80%; height: 80%; background-color: #fff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .lollipop .stick { width: 20px; height: 100px; background-color: #fff; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); } </style> </head> <body> <div class="lollipop"> <div class="stick"></div> </div> </body> </html>

阅读全文