css制作div边框

使用 border 属性设置边框

通过 border 属性可以快速为 div 添加边框，包含边框宽度、样式和颜色：

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

单独设置边框各方向

通过 border-top、border-right、border-bottom、border-left 分别控制不同方向的边框：

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

自定义边框样式

支持多种边框样式，如 solid（实线）、dashed（虚线）、dotted（点线）等：

div {
  border: 4px dotted #ff5733; /* 4px点线橙色边框 */
}

圆角边框

通过 border-radius 属性实现圆角效果：

div {
  border: 2px solid #333;
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置四角 */
  border-radius: 5px 10px 15px 20px;
}

阴影效果

结合 box-shadow 增加立体感：

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

透明边框

使用 rgba 或 transparent 实现透明或半透明边框：

div {
  border: 3px solid rgba(0, 0, 255, 0.5); /* 半透明蓝色 */
}

边框动画

通过 transition 或 @keyframes 实现动态效果：

div {
  border: 2px solid #000;
  transition: border 0.3s ease;
}
div:hover {
  border: 2px solid #ff0000; /* 悬停时变红色 */
}