CSS小技巧-煎蛋的画法~
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>这是三个煎蛋</title> <style type="text/css"> /*这是第一个煎蛋*/ #oneegg{ width: 100px; height: 100px; border: 50px solid #FFFFCC; background-color: #FFFF00; border-radius: 100px; } /*这是第二个煎蛋*/ #twoegg{ width: 200px; height: 200px; background-color: #FFFFCC; border-radius: 100px; overflow: hidden; } #twoegg .danhuang{ width: 100px; height: 100px; background-color: #FFFF00; border-radius: 50px; margin-top:50px ; margin-left: 50px; } /*这是第三个煎蛋*/ #threeegg{ width: 200px; height: 200px; background-color: #FFFF00; box-shadow: 0px 0px 0px 50px #FFFFCC inset; border-radius: 100px; } </style> </head> <body> <!--这是第一个煎蛋--> <div id="oneegg"></div> <!--这是第二个煎蛋--> <div id="twoegg"> <div class="danhuang"></div> </div> <!--这是第三个煎蛋--> <div id="threeegg"></div> </body> </html>