一、效果图
border-radius分别指定各个角弯曲程度
二、粘贴复制
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body { width: 100%; } .box { width: 480px; margin:100px auto; } img{ width:480px; height:300px; border-radius: 100% 100% 100% 100% / 0% 0% 30% 30%; } /* border-radius的常规用法我就不说了，这里就讲解一下上面那几个参数指的是什么；前面的是水平半径；后面的是垂直半径*/ </style> </head> <body> <div class="box"> <img src="http://img5.imgtn.bdimg.com/it/u=2230167403,4188800858&fm=26&gp=0.jpg" alt=""> </div> </body> </html>