css边框制作

使用 border 属性设置基础边框

通过 border 属性可以快速设置边框的宽度、样式和颜色。例如：

div {
  border: 2px solid #000;
}

这表示边框宽度为 2 像素，实线样式，颜色为黑色。

单独控制边框各边

使用 border-top、border-right、border-bottom 和 border-left 可以单独设置每一边的边框：

div {
  border-top: 1px dashed red;
  border-right: 3px dotted blue;
}

边框样式选择

边框样式通过 border-style 设置，常见值包括：

• solid：实线
• dashed：虚线
• dotted：点线
• double：双线
• groove：3D凹槽
• ridge：3D凸起

边框圆角效果

使用 border-radius 属性可以创建圆角边框：

div {
  border-radius: 10px;
}

可以为每个角单独设置：

div {
  border-radius: 5px 10px 15px 20px;
}

边框阴影效果

通过 box-shadow 属性添加边框阴影：

div {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

参数依次为：水平偏移、垂直偏移、模糊半径、颜色。

透明边框技巧

设置透明边框可以预留空间，不影响布局：

div {
  border: 10px solid transparent;
}

常用于悬停效果时显示边框而不移动内容。

边框渐变效果

使用 border-image 创建渐变或图案边框：

div {
  border: 10px solid;
  border-image: linear-gradient(45deg, red, blue) 1;
}