半圓，1/4圓，半橢圓，1/4橢圓，純CSS畫圖
阿新 • • 發佈：2019-01-30
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*半圓*/ .box{ width:100px; height: 50px; background-color: red; border-radius: 50px 50px 0 0; } /*1/4圓*/ .box{ width:50px; height: 50px; background-color: red; border-radius: 50px 0 0 0; } /*1/2橢圓*/ .box{ width: 200px; height: 150px; border-radius: 100px 100px 0 0/150px 150px 0 0; background-color: red; } /*1/4橢圓*/ .box{ width:100px; height: 80px; background-color: red; border-radius: 100px 0 0 0/80px 0 0 0; } </style> </head> <body> <div class='box'></div> </body> </html>