当前位置：首页 > news >正文

在JavaScript / HTML中，调整div的边框

news 2025/10/11 7:13:25

在 HTML 中，可以通过 CSS 的 border 属性调整 <div> 元素的四周边框。以下是常见的调整方法：

方法 1：统一设置四周边框

<div style="border: 2px solid red;">内容</div>

2px: 边框宽度
solid: 边框样式（实线）
red: 边框颜色

其他边框样式选项：dashed（虚线）、dotted（点线）、double（双线）等。

方法 2：分别设置各边边框

<div style="border-top: 1px solid blue;border-right: 2px dashed green;border-bottom: 3px dotted orange;border-left: 4px double purple;
">内容</div>

border-top: 上边框
border-right: 右边框
border-bottom: 下边框
border-left: 左边框

方法 3：单独设置边框属性

<div style="border-width: 2px 4px 6px 8px; /* 上 右 下 左 */border-style: solid dashed dotted double;border-color: red green blue yellow;
">内容</div>

border-width: 四边宽度（按顺时针顺序：上→右→下→左）
border-style: 四边样式
border-color: 四边颜色

方法 4：使用 CSS 类（推荐）

<style>.custom-border {border: 2px solid #333;border-radius: 10px; /* 可选：圆角边框 */padding: 20px; /* 可选：内边距 */}
</style><div class="custom-border">内容</div>

关键属性说明

属性	作用	示例值
`border`	统一设置四边	`2px solid red`
`border-top`/`border-right`/`border-bottom`/`border-left`	单独设置某一边	`3px dashed #00f`
`border-width`	边框宽度	`1px 2px 3px 4px`（上→右→下→左）
`border-style`	边框样式	`solid`, `dashed`, `dotted`, `double`
`border-color`	边框颜色	`#ff0000`, `rgba(0,0,0,0.5)`
`border-radius`	圆角边框	`10px`

示例：完整代码

<!DOCTYPE html>
<html>
<head><style>.box {width: 200px;height: 100px;border: 3px solid black;border-radius: 15px;padding: 20px;margin: 10px;}.dashed-border {border: 2px dashed #666;}</style>
</head>
<body><div class="box">统一边框 + 圆角</div><div class="dashed-border">虚线边框</div>
</body>
</html>