border-radius CSS繪製圓形、橢圓形

border-radius CSS繪製圓形、橢圓形

圓形

<img style="width: 150px;height: 150px;border-radius: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjSCLTya3ZW28wGQr-cpqh8IEXVD7vqdq3l9-X3TmE3EvaVdoIkcIIIsxWm8xk40G4lQjAthoxB00h64WZVvn8JXV-Mgf-x3p7mHBWf4jRwdMR2ciyn8k2txQmwmMuEedUHRVTgLlvnO2/s120/20170602_001.jpg" />

橢圓形

<img style="width: 150px;height: 100px;border-radius: 150px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjSCLTya3ZW28wGQr-cpqh8IEXVD7vqdq3l9-X3TmE3EvaVdoIkcIIIsxWm8xk40G4lQjAthoxB00h64WZVvn8JXV-Mgf-x3p7mHBWf4jRwdMR2ciyn8k2txQmwmMuEedUHRVTgLlvnO2/s120/20170602_001.jpg" />

右半圓形
<img style="border-radius: 50px 0 0 50px; height: 100px; width: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjSCLTya3ZW28wGQr-cpqh8IEXVD7vqdq3l9-X3TmE3EvaVdoIkcIIIsxWm8xk40G4lQjAthoxB00h64WZVvn8JXV-Mgf-x3p7mHBWf4jRwdMR2ciyn8k2txQmwmMuEedUHRVTgLlvnO2/s120/20170602_001.jpg" />

左半圓形

<img style="border-radius: 0 50px 50px 0; height: 100px; width: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjSCLTya3ZW28wGQr-cpqh8IEXVD7vqdq3l9-X3TmE3EvaVdoIkcIIIsxWm8xk40G4lQjAthoxB00h64WZVvn8JXV-Mgf-x3p7mHBWf4jRwdMR2ciyn8k2txQmwmMuEedUHRVTgLlvnO2/s120/20170602_001.jpg" />

四分之一圓形
<img style="border-radius: 50px 0 0 0; height: 100px; width: 50px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjSCLTya3ZW28wGQr-cpqh8IEXVD7vqdq3l9-X3TmE3EvaVdoIkcIIIsxWm8xk40G4lQjAthoxB00h64WZVvn8JXV-Mgf-x3p7mHBWf4jRwdMR2ciyn8k2txQmwmMuEedUHRVTgLlvnO2/s120/20170602_001.jpg" />