CSS开发文字底部wavy underline效果
发布时间
阅读量：
阅读量
方法1.使用径向渐变绘制我们的波浪线效果
一个波浪线循环段由一个向上弯曲的半圆形弧线与一个向下弯曲的半圆形弧线共同构成。
因此，只需借助径向渐变技术来绘制圆弧，并利用background-position属性调节两个圆弧的位置，使它们依次排列连接，即可达成波浪线的视觉效果。
.flow-wave {
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x,
radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
}
方法2.使用SVG波形
全部评论 (0)
还没有任何评论哟~