当前位置：首页 > CSS

css制作边框

2026-02-27 09:39:53CSS

使用border属性制作基础边框

通过border属性可以快速为元素添加边框，需指定宽度、样式和颜色。例如：

div {
  border: 2px solid #000; /* 宽度2px、实线、黑色 */
}

支持样式包括：solid（实线）、dashed（虚线）、dotted（点线）、double（双线）等。

单独控制边框各边

使用border-top、border-right、border-bottom、border-left分别控制各边：

div {
  border-top: 1px dashed red;
  border-right: 3px dotted blue;
}

圆角边框（border-radius）

通过border-radius实现圆角效果，值可以是像素或百分比：

div {
  border: 1px solid #333;
  border-radius: 10px; /* 统一圆角 */
  /* 或分别设置：border-radius: 5px 10px 15px 20px; */
}

边框阴影（box-shadow）

添加阴影效果增强立体感：

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

渐变边框

结合background-clip和伪元素实现渐变边框：

div {
  position: relative;
  background: white;
  padding: 10px;
}
div::before {
  content: "";
  position: absolute;
  top: -5px; left: -5px;
  right: -5px; bottom: -5px;
  background: linear-gradient(45deg, red, blue);
  z-index: -1;
  border-radius: 12px;
}

透明边框（border-transparent）

利用transparent关键字或RGBA透明度：

div {
  border: 2px solid transparent; /* 完全透明 */
  /* 或 */
  border: 2px solid rgba(0, 0, 0, 0.5); /* 半透明 */
}

边框动画效果

通过CSS动画让边框动态变化：

css制作边框

@keyframes pulse {
  0% { border-color: red; }
  50% { border-color: blue; }
  100% { border-color: red; }
}
div {
  border: 2px solid;
  animation: pulse 2s infinite;
}