# 使用 CSS 伪元素实现外部边框

CSS 是一个灵活的工具，为网页开发人员在操纵 HTML 元素上提供了极大的灵活性。在众多 CSS 技术中，使用伪元素的方式尤其强大，可以增强网页的外观。在这篇文章中，我们将探讨如何使用 CSS 伪元素创建外部边框。

什么是伪元素？

伪元素是添加到 CSS 选择器中的关键字，使开发人员能够设计选择的 HTML 元素的特定部分。两个最常用的伪元素是 ::before 和 ::after，它们分别在元素内容之前或之后生成内容。

创建外部边框

下面是一个如何使用伪元素创建外部边框的例子：

.container {
  position: relative;
  overflow: hidden; // 这行代码对隐藏伪元素在 .slider 外部是至关重要的
  
  // 其他样式…
  
  .slider {
    position: absolute;
    // 其他样式…
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 36rpx;
      height: 100%;
      background-color: #ffffff;
    }
    &.positionA {
        
      // 其他样式…
      
      &::before {
        right: -36rpx;
      }
      &::after {
        right: -36rpx;
      }
    }
    &.positionB {
        
      // 其他样式…
      
      &::before {
        left: -36rpx;
      }
      &::after {
        left: -36rpx;
        border-radius: 0 0 36rpx 0;
      }
    }
  }
}

::before 和 ::after 伪元素向 .slider 元素添加了两个额外的块，每个块都被赋予一个绝对位置和一个负的右值或左值，以将它们移动到 .slider 的外部。这创造了外部边框效果。

这里的一个关键行是 .container 上的 overflow: hidden;。这隐藏了任何落在 .slider 边界外的伪元素部分，这是实现外部边框效果的必要步骤。

应用过渡效果

为了在活动标签变化时创建平滑的过渡，应用 transition: transform 0.3s ease-in-out; 到 .slider。这将使边框过渡平滑地进行动画。

自定义设计

通过修改伪元素的 background-color 和其他样式属性，可以定制边框颜色等设计方面。

结论

通过使用 CSS 伪元素，我们可以创建互动的、视觉上引人入胜的组件，而无需在 HTML 结构中添加额外的 div

元素。这种既强大又简单的技术是任何网页设计师工具箱中的宝贵添加。