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

Never_Satisfied2025-10-11 19:56

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

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

html 复制代码

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

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

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

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

html 复制代码

<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：单独设置边框属性

html 复制代码

<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 类（推荐）

html 复制代码

<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`

示例：完整代码

html 复制代码

<!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>

通过上述方法，你可以灵活调整 <div> 的边框样式。如果需要更复杂的效果（如阴影），可以结合 box-shadow 属性使用。