css圆角

/* 使用 border-radius 属性来创建圆角效果 */
.rounded-corner {
    width: 200px;
    height: 100px;
    background-color: #87CEEB;
    border-radius: 25px; /* 圆角的半径为 25px */
}

/* 创建完全圆形的效果 */
.circle {
    width: 100px;
    height: 100px;
    background-color: #FF6347;
    border-radius: 50%; /* 将元素变成一个圆形 */
}

/* 不同方向的圆角 */
.different-corners {
    width: 200px;
    height: 100px;
    background-color: #90EE90;
    border-top-left-radius: 25px;   /* 左上角 */
    border-top-right-radius: 5px;   /* 右上角 */
    border-bottom-right-radius: 15px; /* 右下角 */
    border-bottom-left-radius: 10px;  /* 左下角 */
}

解释说明：

• border-radius 是 CSS 中用于设置元素边框圆角的属性。
• 如果你希望创建一个完全圆形的元素，可以将 border-radius 设置为 50%。
• 你可以分别为每个角设置不同的圆角半径，通过使用 border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius 来实现。