[分享]css3图片边角变圆的标签

CSS3图片边角变圆的标签可以让图片显示更加美观，使得页面的整体风格更具统一性。下面是关于CSS3图片边角变圆的标签的一些介绍。.roundedimage{ borderradius:50; } 以上...

CSS3图片边角变圆的标签可以让图片显示更加美观，使得页面的整体风格更具统一性。下面是关于CSS3图片边角变圆的标签的一些介绍。

.rounded-image{
    border-radius:50%;
} 

以上代码使用了CSS3中的border-radius属性，将图片的边角变成圆形。其数值50%表示圆形半径为图片宽度或高度的一半。若要实现不同边角不同的效果，可以使用四个参数表示左上、右上、右下、左下的半径大小。

.rounded-image{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
} 

以上代码实现了四个边角都为20px的效果。若不需要圆形，可以设置其中某些边角的半径为0px。

.rounded-image{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
} 

以上代码实现了左上和右上为20px的圆角，而左下和右下为直角。

需要注意的是，如果图片本身存在圆角，则使用CSS3的图片边角变圆标签时会覆盖掉原有的圆角，若要保留原有的圆角，需要将图片包裹在div中，并将div的边角设为圆角。

.rounded-div{
    border-radius:20px;
}
.rounded-div img{
    border-radius:inherit;
} 

以上代码实现了将图片包裹在一个圆角为20px的div中，同时保留图片的原有圆角。

总之，CSS3图片边角变圆的标签是一个非常常用的效果，能够为页面增添美感。需要掌握其基本用法，还需要注意一些细节问题。