seven's blog | 纯css实现虚点线渐变效果

纯css实现虚点线渐变效果
2022年01月25日
次

实现思路：

渐变背景色+与背景色相同的边框虚点线+background-origin设置背景图定位

效果图：

代码：

<!--虚点线元素容器-->
body {
    background-color: #636465;
    position: relative;
    height: 100vh;
}

.demo {
    width: 200px;
    height: 0;
    <!--设置需要呈现的虚点线的渐变色-->
    background: linear-gradient(46deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.04) 100%);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    <!--背景色从边框开始填充-->
    background-origin: border-box;
    <!--边框颜色与容器背景色一致-->
    border-bottom: 2px dotted #636465;
}

总结：

本来觉得渐变的虚点线肯定是实现不了的，网上查资料时一些方案给了灵感，所以脑洞大开了一下，投机取巧最终实现了这个效果。

知识共享许可协议
本博客所有博文作者 均为张敏。 所有文章除特别声明外，均采用 CC 3.0 License, 许可协议。转载请注明出处！ 博客源码可点击查看； 博客部分设计理念参考了羡辙杂俎。