盒子模型的圆角边框怎样实现
发布时间:2023-05-23 17:50:00
发布人:qyf
实现盒子模型的圆角边框可以使用CSS的border-radius属性。该属性可设置圆角的半径大小,以像素、百分比或其他合法的CSS长度单位表示。
以下是一个示例,展示如何在盒子模型中设置圆角边框:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 2px solid black;
border-radius: 20px;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
在上述示例中,我们创建了一个div元素,并设置了一个2像素粗的黑色边框。通过设置border-radius属性为20像素,我们使该元素的边框具有了圆角。您可以通过修改border-radius属性的值来调整圆角的大小。