当前位置：首页 > CSS

css边框制作

2026-04-01 10:21:26CSS

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;
}

渐变边框

使用伪元素实现渐变边框：

css边框制作

.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;
}