CSS圓角是網(wǎng)頁設(shè)計中常用的一個樣式效果。利用CSS的border-radius屬性可以實(shí)現(xiàn)矩形元素的圓角效果。下面我們來看一些常見的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圓角效果，可以讓網(wǎng)頁設(shè)計更有趣味性和美感。但是值得注意的是，在實(shí)現(xiàn)CSS圓角效果的時候，要考慮瀏覽器兼容性，以及代碼的優(yōu)化，避免代碼冗余。