css如何设置边框圆角

2025-10-30 04:26:30

1、打开编辑器，新建一个border.html,用来讲解今天的内容

css如何设置边框圆角

2、在页面的body区域内，新建一个名为test的div

css如何设置边框圆角

3、在css标签里，给test 设置宽200px，高200px，黑色边框和居中对齐

css如何设置边框圆角

4、在编辑器中打开border.html,可以看到现在边框是直角

css如何设置边框圆角

5、回到编辑器，在css给test加上border-radius:8px属性

css如何设置边框圆角

6、再次在浏览器中打开border.html,发现边框的直角已经变成圆角

css如何设置边框圆角

7、贴一下代码，供参考：

<!DOCTYPE html>

<html>

<head>

<title>css如何设置边框圆角</title>

</head>

<style>

.test{

width: 200px;

height: 200px;

border: 1px solid #000000;

margin: 0 auto;

border-radius:8px;

}

</style>

<body>

</div>

</body>

</html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。