css边框制作
CSS边框基础语法
使用border属性可快速定义边框样式，语法如下：
border: [宽度] [样式] [颜色];示例：
div {
border: 2px solid #ff0000; /* 2像素红色实线边框 */
}边框样式类型
通过border-style指定边框样式，常用值：
solid：实线dashed：虚线dotted：点线double：双线groove：3D凹槽ridge：3D凸起
单独控制各边
可分别设置四条边的边框：
div {
border-top: 1px dotted blue;
border-right: 2px dashed green;
border-bottom: 3px double red;
border-left: 4px solid black;
}圆角边框
使用border-radius创建圆角效果：
.rounded {
border-radius: 10px; /* 统一圆角 */
}
.ellipse {
border-radius: 50%; /* 圆形 */
}边框阴影
通过box-shadow添加阴影效果：
.shadow {
box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}
/* 参数：水平偏移 垂直偏移 模糊半径 颜色 */渐变边框
结合border-image实现渐变边框：
.gradient-border {
border: 10px solid;
border-image: linear-gradient(45deg, red, blue) 1;
}透明边框技巧
利用透明边框实现悬浮效果：
.button {
border: 2px solid transparent;
transition: border-color 0.3s;
}
.button:hover {
border-color: #3498db;
}边框动画
通过CSS动画让边框动起来：
@keyframes pulse {
0% { border-color: red; }
50% { border-color: blue; }
100% { border-color: red; }
}
.animated {
animation: pulse 2s infinite;
}
