css图片直角变圆角

CSS是网页设计中至关重要的一部分，它可以控制网页的样式和布局。其中，图片的样式也可以通过CSS进行控制。本文介绍如何使用CSS将图片的直角变成圆角。

img{
border-radius: 50%;
}

上述代码中，img表示图片元素，border-radius是用来设置圆角的属性，其中的50%表示将图片的四个角都变成圆角。如果想将某个角变成圆角，可以使用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius属性来分别控制相应的角。

此外，可以使用CSS的伪类选择器来实现图片圆角的不同效果。例如，hover伪类可以让鼠标悬停在图片上时，图片的圆角变得更加明显。

img:hover{
border-radius: 100%;
}

以上代码中，img:hover表示当鼠标悬停在图片上时，应用圆形边框，并将图片的四个角变成圆角，border-radius的值为100%。

总之，通过CSS的控制，我们可以轻松实现图片的圆角效果，为网页设计添加更多的美感和个性。