css 弧角 |css3编写的网站后台链接

/* 把一个元素的所有四个角都改成圆角 */
border-radius: 50%;
/* 把一个元素的左侧两个角改成圆角 */
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
/* 把一个元素的右侧两个角改成椭圆角 */
border-top-right-radius: 20px 30px;
border-bottom-right-radius: 20px 30px;

border-radius 属性有一个简写方式，可以一次性指定四个角的效果：

/* 从左上角开始，顺时针依次指定四个角的半径 */
border-radius: 10px 20px 30px 40px;

如果某一个角的半径是 0，这个角就不会有弧角效果。例如：

/* 只有右下角有弧角效果 */
border-radius: 0 0 20px 0;

在 CSS3 中，弧角效果的实现方式更加灵活，大家可以指定一个不同的半径来控制横向和纵向的弧度。

/* 竖直方向的弧度是 10px，横向方向的弧度是 20px */
border-radius: 10px / 20px;

大家还可以把多个元素的弧角效果进行组合，并且让它们同时具有相同的半径值：

/* 把两个 div 元素的右侧两个角改成圆角并且具有相同的半径值 */
div:first-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
div:last-child {
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}

总之，通过使用 border-radius 属性，大家可以让大家的网页更加美观和动态。