【HTML+CSS】圆角矩形border-radius
在CSS中，border-radius属性用于设置元素的圆角。这个属性可以接受一个或两个值，单个值设置所有四个角的半径，两个值则分别设置元素左上角和右下角以及右上角和左下角的半径。
下面是一个简单的HTML和CSS代码示例，展示如何创建圆角矩形：
<!DOCTYPE html>
<html>
<head>
<style>
.rounded-rectangle {
width: 200px;
height: 100px;
background-color: skyblue;
border-radius: 20px; /* 设置圆角的半径为20px */
}
</style>
</head>
<body>
<div class="rounded-rectangle"></div>
</body>
</html>在这个例子中，.rounded-rectangle类设置了一个宽度为200px，高度为100px的矩形，背景颜色为天蓝色。border-radius属性设置为20px，使得所有四个角都变成了圆角。如果你想为不同的角设置不同的半径，可以提供两个、三个或四个值。例如：
border-radius: 10px 20px 30px 40px; /* 左上角、右上角、右下角、左下角的半径 */或者：
border-radius: 10px 20px; /* 左上角和右下角的半径、右上角和左下角的半径 */使用border-radius可以创建各种不同的圆角矩形。
评论已关闭