CSS圆角是网页设计中常用的一个样式效果。利用CSS的border-radius属性可以实现矩形元素的圆角效果。下面我们来看一些常见的CSS圆角效果。

/* 圆形 */
.shape-circle {
border-radius: 50%;
}
/* 单一圆角 */
.shape-rounded {
border-radius: 10px 0 0 10px;
}
/* 对角线圆角 */
.shape-diagonal {
border-radius: 0 50% 0 0;
}
/* 矩形圆角 */
.shape-rect {
border-radius: 5px;
}
/* 椭圆 */
.shape-ellipse {
border-radius: 50% / 25%;
}
/* 菱形 */
.shape-diamond {
transform: rotate(45deg);
width: 100px;
height: 100px;
}
.shape-diamond:before {
content: "";
position: absolute;
top: -35px;
left: -35px;
width: 100px;
height: 100px;
background-color: #fff;
transform: rotate(45deg);
border-radius: 10px;
}

通过使用不同的CSS圆角效果，可以让网页设计更有趣味性和美感。但是值得注意的是，在实现CSS圆角效果的时候，要考虑浏览器兼容性，以及代码的优化，避免代码冗余。