html正方形边框,详解HTML设置边框的三种方式(html画方框用border)
在HTML中,可以通过CSS样式来设置元素的边框。以下是设置正方形边框的三种方法:
- 直接在HTML元素中使用
style
属性设置边框:
<div style="width: 100px; height: 100px; border: 2px solid black;"></div>
- 在
<head>
中使用<style>
标签定义CSS样式,然后在元素中使用class
或id
引用样式:
<style>
.square {
width: 100px;
height: 100px;
border: 2px solid black;
}
</style>
<div class="square"></div>
- 在外部CSS文件中定义样式,然后在HTML中引用:
/* styles.css */
.square {
width: 100px;
height: 100px;
border: 2px solid black;
}
<link rel="stylesheet" href="styles.css">
<div class="square"></div>
以上三种方法均可以创建一个边框正好是100像素宽高的正方形。
评论已关闭