淘先锋技术网

首页 1 2 3 4 5 6 7

CSS中提供了一种将图片变为圆角的方法,可以让页面看起来更加美观。

/* 设置图片为圆角 */
img {
border-radius: 50%;
}

其中,border-radius属性用于设置边框圆角半径,设置为50%即可将图片变为圆形。

如果想要将图片变为其他形状的圆角,可以调整border-radius值,例如:

/* 设置图片为椭圆形 */
img {
border-radius: 50% 20%;
}

此时,图片的上下圆角半径为50%,左右圆角半径为20%,形成了椭圆形。

需要注意的是,使用border-radius属性设置图片圆角时,需要确保图片本身的宽高比与所设圆角的宽高比一致,否则图片可能会被拉伸或压缩。

通过CSS中的border-radius属性,可以轻松将图片变为各种形状的圆角,为页面增添美感。