当前位置：首页 > CSS

css护栏制作

2026-02-27 05:12:47CSS

CSS 护栏制作方法

使用CSS制作护栏效果可以通过边框、阴影、渐变等属性实现，以下是几种常见方法：

边框模拟护栏

通过border属性创建栏杆效果，结合伪元素添加细节：

css护栏制作

.railing {
  width: 100%;
  height: 20px;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
  background: repeating-linear-gradient(
    to right,
    #333,
    #333 2px,
    transparent 2px,
    transparent 10px
  );
}

伪元素绘制竖杆

利用::before或::after伪元素生成垂直栏杆：

css护栏制作

.fence {
  position: relative;
  height: 100px;
  border-top: 4px solid #555;
}
.fence::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(90deg, #555 2px, transparent 1px);
  background-size: 15px 100%;
}

3D 立体护栏

通过box-shadow和transform创造立体效果：

.railing-3d {
  width: 300px;
  height: 150px;
  background: #8B4513;
  position: relative;
  box-shadow: 
    0 0 0 5px #654321,
    0 10px 20px rgba(0,0,0,0.3);
  border-radius: 3px;
}
.railing-3d::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 5px;
  right: 5px;
  height: 80%;
  background: 
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 18px,
      #FFF 18px,
      #FFF 20px
    );
}

动画护栏效果

添加CSS动画使护栏具有交互性：

.animated-rail {
  width: 200px;
  height: 50px;
  background: #333;
  position: relative;
  overflow: hidden;
}
.animated-rail::before {
  content: "";
  position: absolute;
  top: 0;
  left: -20px;
  height: 100%;
  width: 10px;
  background: gold;
  animation: rail-light 2s infinite linear;
}
@keyframes rail-light {
  0% { left: -20px; }
  100% { left: 220px; }
}