border-radius属性接受一个或多个值,可以指定不同的圆角半径。例如:
border-radius:10px;
这将在所有四个角上创建一个10像素的圆角。您也可以为不同的角设置不同的半径,例如:
border-radius:10px 5px 20px 0;
这将在顶部的左侧角和底部的右侧角之间创建一个弧度为10像素的圆形,以及顶部的右侧角和底部的左侧角之间创建一个弧度为5像素的圆形,并在底部的左侧角和顶部的右侧角之间创建一个20像素的圆形。剩余的角不会被圆角化。
除了这些基本的属性之外,大家还可以使用border-radius搭配其他属性来创建更复杂、特殊的形状。例如:
border-radius: 50% / 10% 20%;
这将创建一个椭圆形,其中水平半径是垂直半径的两倍,底部左侧角的半径为10%,底部右侧角的半径为20%,而其他两个角不适用边缘边距。
使用border-radius属性可以帮助大家轻松制作出更美观的页面,而且让用户感觉更为柔和,更温暖。