css制作div边框
使用 border 属性设置基本边框
通过 border 属性可以快速为 div 设置边框样式、宽度和颜色。语法如下：
div {
border: 1px solid #000; /* 宽度 | 样式 | 颜色 */
}- 宽度：支持像素（
px）、em或关键字（如thin）。 - 样式：常见值包括
solid（实线）、dashed（虚线）、dotted（点线）。 - 颜色：支持十六进制、RGB 或颜色名称。
单独设置各边边框
通过 border-top、border-right、border-bottom 和 border-left 分别控制各边样式：
div {
border-top: 2px dashed red;
border-right: 1px solid blue;
border-bottom: 3px dotted green;
border-left: 1px solid gray;
}圆角边框（border-radius）
使用 border-radius 为边框添加圆角效果：
div {
border: 1px solid #000;
border-radius: 10px; /* 统一圆角 */
/* 或分别设置四个角 */
border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */
}阴影效果（box-shadow）
通过 box-shadow 为边框添加阴影，增强立体感：
div {
border: 1px solid #ccc;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* 水平偏移 | 垂直偏移 | 模糊半径 | 颜色 */
}透明边框（transparent）
设置透明边框可用于占位或悬停效果：
div {
border: 2px solid transparent; /* 初始透明 */
transition: border 0.3s;
}
div:hover {
border-color: #000; /* 悬停时显示 */
}双色边框（伪元素技巧）
通过伪元素实现复杂边框效果，例如双色边框：
div {
position: relative;
width: 200px;
height: 100px;
background: #fff;
}
div::before {
content: "";
position: absolute;
inset: -5px; /* 覆盖整个div并外扩 */
border: 3px solid red;
z-index: -1;
}注意事项
- 盒模型影响：边框宽度会占用
div的实际尺寸，可通过box-sizing: border-box包含在总宽高中。 - 性能优化：避免过度使用阴影或复杂边框，可能影响渲染性能。
