css实现图片虚化_CSS 圆角

CSS border-radius - 指定每个角

border-radius 属性可以接受一到四个值。规则如下：

四个值 - border-radius: 15px 50px 30px 5px;(依次分别用于：左上角、右上角、右下角、左下角)：

三个值 - border-radius: 15px 50px 30px;(第一个值用于左上角，第二个值用于右上角和左下角，第三个用于右下角)：

两个值 - border-radius: 15px 50px;(第一个值用于左上角和右下角，第二个值用于右上角和左下角)：

一个值 - border-radius: 15px;(该值用于所有四个角，圆角都是一样的)：

这是代码：

实例

#rcorners1 {

border-radius: 15px 50px 30px 5px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners2 {

border-radius: 15px 50px 30px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners3 {

border-radius: 15px 50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners4 {

border-radius: 15px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

您还可以创建椭圆角：

实例

#rcorners1 {

border-radius: 50px / 15px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners2 {

border-radius: 15px / 50px;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}

#rcorners3 {

border-radius: 50%;

background: #73AD21;

padding: 20px;

width: 200px;

height: 150px;

}