border-radius设置图片圆形(椭圆)显示
发布时间：2016年3月16日 作者：未知 查看次数：1458
其实和div圆形显示一样，用css3的样式border-radius（边框圆角）设置圆角，所以浏览器要支持css3才有效果。设置border-radius:50%，当图片的长和宽相同或设置图片长宽属性相同时就显示为圆形，不同时就为椭圆形。 border-radius共可同时设置1至4个值，如果只设置1个值，表示4个角都使用同一个值；如果设置2个值，表示左上角和右下角使用第一个值，右上角和左下角使用第二个值；如果设置3个值，则左上角使用第一个值，右上角和左下角使用第二个值，右下角使用第三个值；如果设了4个值，则4个值分别为左上角、右上角、右下角、左下角。 对应还有设置单个角的属性分别为： 左上角：border-top-left-radius; 右上角：border-top-right-radius; 左下角：border-bottom-left-radius; 右下角：border-bottom-right-radius; 但这4个属性是可以设置1个或2个值。设置1个值就表示水平方向半径与垂直方向半径相等；如果设置2个值，则第一个值为水平方向半径，第二个值为垂直方向半径。 ====================== 示例代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>border-radius设置图片圆形(椭圆)显示</title> <STYLE TYPE="text/css"> <!-- .iRound1{ border-radius:50%; } .iRound2{ border-radius:50%; border-bottom-right-radius:30px 60px; } --> </STYLE> </head> <body> <br> <img class="iRound1" src="a.jpg"> <img class="iRound2" src="a.jpg"> <div class="iRound2" style="width:200px;height:200px;background-color:#0000ff;"></div> </body> </html>
|
||||||
|
||||||
