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

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

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