css边框制作
CSS边框基础语法
使用border属性可以快速设置边框的样式、宽度和颜色。语法格式如下：
border: [width] [style] [color];示例：
div {
border: 2px solid #ff0000;
}单独设置边框属性
可以分别控制边框的宽度、样式和颜色：
border-width: 1px; /* 边框宽度 */
border-style: solid; /* 边框样式 */
border-color: #000000; /* 边框颜色 */边框样式类型
border-style支持多种样式：
dotted; /* 点线 */
dashed; /* 虚线 */
solid; /* 实线 */
double; /* 双线 */
groove; /* 3D凹槽 */
ridge; /* 3D凸起 */
inset; /* 3D内嵌 */
outset; /* 3D外凸 */
none; /* 无边框 */
hidden; /* 隐藏边框 */单边边框设置
可以单独设置某一边的边框：
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double black;圆角边框
使用border-radius属性创建圆角：
border-radius: 10px; /* 所有角 */
border-radius: 5px 10px; /* 左上右下 右上左下 */
border-radius: 5px 10px 15px; /* 左上 右上左下 右下 */
border-radius: 5px 10px 15px 20px; /* 左上 右上 右下 左下 */边框阴影
使用box-shadow添加阴影效果：
box-shadow: h-offset v-offset blur spread color inset;示例：
box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);边框图像
使用图片作为边框：
border-image: source slice width outset repeat;示例：
border-image: url(border.png) 30 30 round;透明边框
创建透明边框效果：
border: 10px solid transparent;响应式边框
使用媒体查询调整不同屏幕尺寸下的边框：
@media (max-width: 768px) {
.box {
border-width: 2px;
}
}动画边框
使用CSS动画让边框动起来：
@keyframes border-pulse {
0% { border-color: red; }
50% { border-color: blue; }
100% { border-color: red; }
}
.box {
animation: border-pulse 2s infinite;
}渐变边框
使用伪元素实现渐变边框：
.box {
position: relative;
}
.box::before {
content: "";
position: absolute;
inset: 0;
padding: 2px;
background: linear-gradient(45deg, red, blue);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
}
