css 边框制作
CSS 边框基础语法
边框通过 border 属性设置，包含三个子属性：宽度（border-width）、样式（border-style）、颜色（border-color）。完整语法示例：
div {
border: 2px solid #ff0000; /* 宽度2px、实线样式、红色 */
}单边边框控制
可通过方向属性单独控制某一边框：
div {
border-top: 1px dashed blue;
border-right: 3px dotted green;
border-bottom: 2px double black;
border-left: 4px groove #ccc;
}边框样式类型
border-style 支持多种样式：
solid：实线dashed：虚线dotted：点线double：双线groove：3D凹槽ridge：3D凸起inset：内嵌效果outset：外凸效果
圆角边框
使用 border-radius 创建圆角效果：
div {
border-radius: 10px; /* 统一圆角 */
border-radius: 5px 10px 15px 20px; /* 分别设置四个角 */
}阴影边框
通过 box-shadow 添加阴影：
div {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
/* 参数：水平偏移 垂直偏移 模糊半径 颜色 */
}渐变边框
结合伪元素实现渐变边框：
div {
position: relative;
background: white;
}
div::before {
content: "";
position: absolute;
inset: -5px; /* 边框扩展 */
z-index: -1;
background: linear-gradient(45deg, red, blue);
border-radius: 12px; /* 需大于主元素圆角 */
}透明内容区域边框
使用 outline 属性绘制不影响布局的边框：
div {
outline: 3px solid yellow;
outline-offset: 5px; /* outline与元素间距 */
}边框图像
通过 border-image 使用图片作为边框：
div {
border: 10px solid transparent;
border-image: url(border.png) 30 round;
}
