css将图片变成椭圆 |天猫导航css下拉菜单颜色透明

css多层菜单，如何使用css组合，body相关的css属性，简单css+html页面，用css写分割线，css3鼠标划过效果，天猫导航css下拉菜单颜色透明 css将图片变成椭圆 |天猫导航css下拉菜单颜色透明

/* HTML 代码 */
<img src="example.jpg" alt="例图">
/* CSS 代码 */
img {
border-radius: 50%; /*设置边框半径为图片宽高中的最大值的一半*/
display: block; /*把img元素变成块级元素*/
margin: 0 auto; /*水平居中*/

使用CSS的border-radius属性可以将一个正方形的边框转化为一个椭圆形，即使它的宽高比不一致。把边框半径设为50%即可。这个值填入数字时，要求与图片的宽和高相等，但把它设为50%时，它就能更具自适应性，即使图片的长宽比例不统一时也能正常显示。

除了为图片外的元素设置样式，也可以让图片本身变成椭圆。但是，如果图片太大，会影响整个页面的加载速度，因为浏览器需要下载整个图片。所以，建议把要使用的图片压缩成较小的文件，或使用SVG或WebP格式的图片。