css将图片设置成圆形

img

设置成这种圆形，原图是方形

img


我在css样式加border-radius：50%它只会改变左上角。。

img

img

使用css设置div的高度和宽度为相等值，将border-radius属性设置为50%，overflow属性设置为hidden。
注意事项
border-radius和overflow属性必须同时设置，缺一不可。
img标签外层的div高度和宽度的设置必须

有帮助的话采纳一下哦！谢谢！🙈🙈🙈

img


我给原图加了一个背景 ，原图长320px 高240px

img

img

<!DOCTYPE html>
<html>
<head>
<style>
.login{
    width: 100px;
    height: 100px;
    overflhttps://img-mid.csdnimg.cn/release/static/image/mid/ask/96210368704616.png "#left")
ow:hidden;
    border-radius: 50%;
}
.login img{width:100%}
</style>
</head>
<body>

<div class="login">
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0128%2F6cd17366j00qnmnle008uc000vk00xcm.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643378271&t=8c0e795a70b77cc44b2d09e8125f48b3"/>
</div>

</body>
</html>