css 边框制作

边框基础语法

CSS边框通过border属性设置，包含宽度、样式和颜色三个子属性：

border: 1px solid #000;

等价于：

border-width: 1px;
border-style: solid;
border-color: #000;

单边边框控制

可通过border-top、border-right、border-bottom、border-left分别控制各边：

border-top: 2px dashed red;
border-right: 3px dotted blue;

边框样式类型

border-style支持多种样式：

• solid：实线
• dotted：点线
• dashed：虚线
• double：双线
• groove：3D凹槽
• ridge：3D凸脊
• inset：3D内嵌
• outset：3D外凸

圆角边框

使用border-radius创建圆角效果：

border-radius: 10px; /* 统一圆角 */
border-radius: 5px 10px 15px 20px; /* 分别设置四个角 */

边框阴影

通过box-shadow添加阴影：

box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
/* 参数：水平偏移 垂直偏移 模糊半径 颜色 */

透明边框

利用transparent或rgba()实现透明效果：

border: 2px solid transparent;
border: 2px solid rgba(0,0,0,0.5);

边框图像

使用border-image将图片作为边框：

border-image: url(border.png) 30 round;
/* 参数：图片路径 切片宽度 重复方式 */

轮廓线

outline属性绘制元素外围线条（不影响布局）：

outline: 3px solid green;
outline-offset: 5px; /* 轮廓偏移距离 */