CSS实现渐隐虚线框

Question

如何通过CSS实现下图效果？带有渐隐过渡效果的虚线边框？而且可以设置渐隐的形态和方向？

Answer 1

引自免费微信小程序：皆我百晓生

要实现一个带有渐隐过渡效果的虚线边框，并且能够控制渐隐的形态和方向，可以通过CSS的box-shadow属性结合::before或::after伪元素来完成。这种方法允许我们创建一个叠加在元素上的“虚线边框”，并利用渐变来实现渐隐效果。下面是一个示例代码，展示了如何达到这样的视觉效果：

HTML结构:

<div class="dashed-border">
  <p>content</p>
  <p>content</p>
</div>

CSS样式:

.dashed-border {
  position: relative;
  padding: 20px;
  background-color: white; /* 或者你需要的背景颜色 */
}

.dashed-border::before {
  content: "";
  position: absolute;
  top: -1px; right: -1px; bottom: -1px; left: -1px;
  z-index: -1;
  background-image: linear-gradient(
    to right, 
    rgba(0, 0, 0, 0), 
    rgba(0, 0, 0, 0.2) 25%, 
    rgba(0, 0, 0, 0.2) 75%, 
    rgba(0, 0, 0, 0)
  );
  background-size: 4px 100%;
}

这段代码的工作原理是：

• 使用.dashed-border::before创建一个覆盖在实际内容外部的伪元素。
• 通过background-image属性设置一个线性渐变背景，该渐变定义了从完全透明到半透明（这里以黑色为例，透明度为0.2）再回到透明的模式。通过调整百分比，你可以控制虚线的间隙和宽度，这里假设每段透明和半透明区域各占25%，实现类似虚线的效果。
• background-size属性设置为4px 100%，其中4px是虚线的宽度（可以根据需求调整），100%保证渐变沿元素高度方向拉伸。
• to right指定了渐变的方向是从左到右，如果你想改变渐隐的方向，只需修改这个值，比如to bottom则是从上到下。

这样就创建了一个具有渐隐效果的虚线边框，你可以根据需要调整渐变的颜色、透明度、方向以及虚线的粗细和间距。