css制作div边框

使用border属性设置边框

通过CSS的border属性可以快速为div添加边框，该属性是border-width、border-style和border-color的简写形式。例如：

div {
  border: 2px solid #000; /* 宽度2px、实线、黑色边框 */
}

• border-width：控制边框粗细（如1px、thin）。
• border-style：定义样式（如solid实线、dashed虚线、dotted点线）。
• border-color：设置颜色（支持十六进制、RGB等格式）。

单独设置各方向边框

通过border-top、border-right、border-bottom、border-left可分别设置不同方向的边框样式：

div {
  border-top: 3px dashed red;
  border-right: 1px dotted blue;
  border-bottom: 2px double green;
  border-left: none; /* 无左侧边框 */
}

圆角边框效果

使用border-radius属性可为边框添加圆角，值可以是像素或百分比：

div {
  border: 1px solid #333;
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置四个角 */
  border-radius: 5px 10px 15px 20px; /* 左上、右上、右下、左下 */
}

边框阴影效果

通过box-shadow为div添加阴影，增强立体感：

div {
  border: 1px solid #ccc;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2); /* 水平偏移、垂直偏移、模糊度、颜色 */
}

透明边框与背景裁剪

结合transparent和background-clip可实现特殊效果：

div {
  border: 4px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, red, blue) border-box;
  background-clip: padding-box, border-box;
}

此代码创建了一个渐变色的边框，而div内部背景保持纯色。

响应式边框调整

通过媒体查询动态调整边框样式以适应不同屏幕尺寸：

div {
  border: 2px solid black;
}

@media (max-width: 600px) {
  div {
    border-width: 1px;
    border-radius: 5px;
  }
}