Go语言中处理海量数据:避免嵌套Goroutine,构建高效通道流水线

go语言中处理海量数据:避免嵌套goroutine,构建高效通道流水线

在Go语言中处理大量文件和行时,直接创建嵌套或无限制的Goroutine会导致资源耗尽。本文将探讨这种并发模式的弊端,并提出一种基于通道(channel)的流水线式并发处理方案。通过将任务分解并利用带缓冲的通道进行流量控制,可以有效限制并发量,优化系统资源利用,实现高效且稳定的文件解析。

1. 并发处理大量数据的挑战

在处理诸如“一个文件夹包含大量文件,每个文件又包含大量行”这类任务时,开发者常常会考虑如何利用Go语言的并发特性来加速处理。直观的思路可能是为每个文件或甚至每行创建一个独立的Goroutine。然而,如果不加以控制,这种方式很快就会导致系统资源耗尽,例如CPU调度开销过大、内存不足等问题。

1.1 潜在的陷阱:无限制的Goroutine创建

考虑以下两种常见的、但可能导致问题的并发模式:

模式一:嵌套Goroutine

立即学习“go语言免费学习笔记(深入)”;

// 伪代码示例func processFolder(folderPath string) {    files := readFiles(folderPath)    for _, file := range files {        go do1(file) // 为每个文件启动一个Goroutine    }}func do1(file File) {    lines := readLines(file)    for _, line := range lines {        go do2(line) // 为文件中的每行再启动一个Goroutine    }}func do2(line Line) {    // 执行具体的行处理逻辑    // do_something}

在这种模式下,一个文件处理Goroutine会为其内部的每一行再启动一个Goroutine。如果文件数量和行数都非常大,系统将瞬间创建出天文数字般的Goroutine,导致严重的资源竞争和性能下降。

模式二:单层但无限制的Goroutine

// 伪代码示例func processFolderAndLines(folderPath string) {    files := readFiles(folderPath)    for _, file := range files {        lines := readLines(file)        for _, line := range lines {            go do_something(line) // 为每个文件的每行都启动一个Goroutine        }    }}func do_something(line Line) {    // 执行具体的行处理逻辑}

尽管这比模式一少了“嵌套”的层次,但本质问题相同:它同样会为每一行创建一个Goroutine。当处理的数据量巨大时,这种方式同样无法有效控制并发度,最终会面临与模式一类似的问题。

这两种模式的核心问题在于它们创建了“任意数量”的工作者,而没有考虑系统实际能够承受的并发量。

2. 推荐方案:基于通道的流水线与流量控制

为了解决上述问题,我们应该采用一种能够限制并发量、实现流量控制的架构。Go语言的通道(channel)和Goroutine结合,是构建这种流水线式处理方案的理想工具

核心思想是将整个处理流程分解为多个阶段,每个阶段负责特定的任务,并通过通道将数据从一个阶段传递到下一个阶段。同时,我们可以通过限制处理特定阶段的Goroutine数量来控制整体的并发度。

2.1 架构设计

我们可以将处理流程划分为至少三个主要阶段:

文件生产者 (File Producer):负责遍历文件夹,将文件路径或文件内容送入一个通道。行生产者 (Line Producer):从文件通道接收文件,解析文件内容,将每行数据送入另一个通道。处理器 (Line Processor):从行通道接收行数据,执行实际的业务逻辑。

这种设计允许我们独立控制每个阶段的并发量,从而实现精细的资源管理。

2.2 实现示例

下面是一个简化的Go语言示例,演示如何使用通道构建这种流水线:

package mainimport (    "fmt"    "io/ioutil"    "log"    "path/filepath"    "strings"    "sync"    "time")// 定义通道容量,用于流量控制const (    fileChanCapacity = 100    lineChanCapacity = 1000    numLineProducers = 4  // 示例:启动4个Goroutine解析文件并生成行    numLineWorkers   = 8  // 示例:启动8个Goroutine处理行数据)// 模拟文件结构和行结构type File struct {    Path string    Name string}type Line struct {    FilePath string    Content  string    LineNum  int}func main() {    // 创建通道    fileChan := make(chan File, fileChanCapacity)    lineChan := make(chan Line, lineChanCapacity)    // resultChan := make(chan ResultType, ...) // 如果需要收集处理结果    var wg sync.WaitGroup    // --- 阶段1: 文件生产者 ---    // 启动一个Goroutine负责遍历文件夹并发送文件信息    wg.Add(1)    go func() {        defer wg.Done()        defer close(fileChan) // 文件发送完毕后关闭文件通道        folderPath := "./test_data" // 假设存在一个test_data文件夹        files, err := ioutil.ReadDir(folderPath)        if err != nil {            log.Printf("Error reading directory %s: %v", folderPath, err)            return        }        for _, f := range files {            if !f.IsDir() {                filePath := filepath.Join(folderPath, f.Name())                fileChan <- File{Path: filePath, Name: f.Name()}                fmt.Printf("Produced file: %sn", f.Name())            }        }    }()    // --- 阶段2: 行生产者 ---    // 启动多个Goroutine从fileChan接收文件,解析行,并发送到lineChan    for i := 0; i < numLineProducers; i++ {        wg.Add(1)        go func(workerID int) {            defer wg.Done()            for file := range fileChan { // 循环直到fileChan被关闭且清空                fmt.Printf("[LineProducer %d] Processing file: %sn", workerID, file.Name)                content, err := ioutil.ReadFile(file.Path)                if err != nil {                    log.Printf("Error reading file %s: %v", file.Path, err)                    continue                }                lines := strings.Split(string(content), "n")                for lineNum, lineContent := range lines {                    if strings.TrimSpace(lineContent) != "" {                        lineChan <- Line{FilePath: file.Path, Content: lineContent, LineNum: lineNum + 1}                    }                }            }            fmt.Printf("[LineProducer %d] Finished.n", workerID)        }(i)    }    // 启动一个Goroutine等待所有文件生产者完成,然后关闭lineChan    wg.Add(1)    go func() {        defer wg.Done()        // 等待所有文件生产者Goroutine完成 (即fileChan被关闭且所有数据被消费)        // 注意:这里的wg.Wait()会等待所有wg.Add(1)对应的wg.Done()        // 实际上,更精确的做法是有一个单独的WaitGroup用于监控LineProducers        // 但为了简化示例,我们知道当fileChan关闭且被消费完后,LineProducers会退出        // 所以这里可以简单地等待一段时间,或者使用更复杂的信号机制        // 这里我们直接依赖于fileChan的关闭,并在所有LineProducers退出后关闭lineChan        // 更好的做法是:创建一个新的WaitGroup for LineProducers, 并在所有LineProducers退出后关闭lineChan        // 考虑到这个示例,我们让主goroutine在所有生产者完成后关闭lineChan        // 更好的模式是:        // 1. 文件生产者关闭 fileChan        // 2. 一个单独的 goroutine 监听 LineProducers 的 wg,当它们都退出时关闭 lineChan        // 为了简化,我们使用一个稍微不那么优雅但能工作的方案:        // 等待足够的时间,确保所有文件都被处理,或者使用一个更精细的协调机制        // 这里我们依赖于 main goroutine 的 wg.Wait() 来确保所有生产者都退出了。        // 实际上,我们应该在所有 numLineProducers 都退出后才关闭 lineChan。        // 最直接的方法是创建一个新的 WaitGroup 专门给 LineProducers。        // 这里为了演示,我们假设在文件生产者关闭后,lineChan 最终会被关闭。        // 实际操作中,应该有一个独立的 Goroutine 来监控 LineProducers 的完成状态。        // 临时方案:等待所有 LineProducers 退出        // 重新设计这部分,确保lineChan在所有LineProducers完成后关闭。        // 创建一个新的 WaitGroup 来等待 LineProducers        var lineProducerWg sync.WaitGroup        for i := 0; i < numLineProducers; i++ {            lineProducerWg.Add(1)            go func(workerID int) {                defer lineProducerWg.Done()                for file := range fileChan {                    // ... (同上,处理文件并发送行到 lineChan)                    fmt.Printf("[LineProducer %d] Processing file: %sn", workerID, file.Name)                    content, err := ioutil.ReadFile(file.Path)                    if err != nil {                        log.Printf("Error reading file %s: %v", file.Path, err)                        continue                    }                    lines := strings.Split(string(content), "n")                    for lineNum, lineContent := range lines {                        if strings.TrimSpace(lineContent) != "" {                            lineChan <- Line{FilePath: file.Path, Content: lineContent, LineNum: lineNum + 1}                        }                    }                }                fmt.Printf("[LineProducer %d] Finished.n", workerID)            }(i)        }        // 确保文件生产者已经启动并关闭了 fileChan        // 这里需要一个机制来等待文件生产者完成,但不能让它阻塞主goroutine        // 简单起见,我们让主goroutine等待所有wg.Done()        // 正确的模式是:        // 1. fileProducer 启动并关闭 fileChan        // 2. lineProducers 从 fileChan 读取,处理完后,如果 fileChan 关闭且为空,它们会退出        // 3. 一个单独的 goroutine 监听 lineProducers 的退出,当所有 lineProducers 退出后,关闭 lineChan        // 为了简化,我们让主 goroutine 等待所有 wg.Done(),并在所有生产者完成后关闭 lineChan。        // 这是一个经典的扇出-扇入模式,需要谨慎处理通道的关闭时机。        // 正确的关闭 lineChan 策略:        // 1. 等待所有 fileChan 的消费者 (即 lineProducers) 完成。        // 2. 一旦所有 lineProducers 完成,关闭 lineChan。        // 我们可以通过一个额外的 Goroutine 来监听 lineProducerWg 的完成。        go func() {            lineProducerWg.Wait() // 等待所有 LineProducers 完成            close(lineChan)       // 所有 LineProducers 都退出了,可以安全关闭 lineChan            fmt.Println("Line channel closed.")        }()        // 注意:上面的 numLineProducers 循环应该放在这里,而不是 main 的直接子 Goroutine        // 否则 lineProducerWg 无法正确计数。        // 重新组织:        // 文件生产者在 main Goroutine 中启动,并关闭 fileChan。        // 多个行生产者 Goroutine 在 main Goroutine 中启动,并添加到 lineProducerWg。        // 一个单独的 Goroutine 等待 lineProducerWg 完成并关闭 lineChan。        // 多个行处理器 Goroutine 在 main Goroutine 中启动,并添加到主 wg。        // --- 阶段3: 行处理器 ---        // 启动多个Goroutine从lineChan接收行数据并处理        for i := 0; i  test_data/file1.txt        // echo "lineAnlineB" > test_data/file2.txt        files, err := ioutil.ReadDir(folderPath)        if err != nil {            log.Printf("Error reading directory %s: %v. Please create it and add some files for testing.", folderPath, err)            return        }        for _, f := range files {            if !f.IsDir() {                filePath := filepath.Join(folderPath, f.Name())                fileChan <- File{Path: filePath, Name: f.Name()}                // fmt.Printf("Produced file: %sn", f.Name()) // 避免过多输出            }        }    }()    // --- 阶段2: 行生产者 ---    var lineProducerWg sync.WaitGroup // 专门用于等待行生产者    for i := 0; i < numLineProducers; i++ {        lineProducerWg.Add(1)        mainWg.Add(1) // 也添加到主 WaitGroup        go func(workerID int) {            defer lineProducerWg.Done()            defer mainWg.Done()            for file := range fileChan {                // fmt.Printf("[LineProducer %d] Processing file: %sn", workerID, file.Name) // 避免过多输出                content, err := ioutil.ReadFile(file.Path)                if err != nil {                    log.Printf("Error reading file %s: %v", file.Path, err)                    continue                }                lines := strings.Split(string(content), "n")                for lineNum, lineContent := range lines {                    if strings.TrimSpace(lineContent) != "" {                        lineChan <- Line{FilePath: file.Path, Content: lineContent, LineNum: lineNum + 1}                    }                }            }            // fmt.Printf("[LineProducer %d] Finished.n", workerID) // 避免过多输出        }(i)    }    // 监听 lineProducerWg,当所有行生产者完成时关闭 lineChan    mainWg.Add(1)    go func() {        defer mainWg.Done()        lineProducerWg.Wait() // 等待所有 LineProducers 完成        close(lineChan)       // 所有 LineProducers 都退出了,可以安全关闭 lineChan        fmt.Println("Line channel closed.")    }()    // --- 阶段3: 行处理器 ---    for i := 0; i < numLineWorkers; i++ {        mainWg.Add(1)        go func(workerID int) {            defer mainWg.Done()            for line := range lineChan {                // 模拟行处理逻辑                time.Sleep(5 * time.Millisecond) // 模拟耗时操作                // fmt.Printf("[LineWorker %d] Processed line %d from %s: %sn", workerID, line.LineNum, filepath.Base(line.FilePath), line.Content) // 避免过多输出            }            // fmt.Printf("[LineWorker %d] Finished.n", workerID) // 避免过多输出        }(i)    }    // 等待所有 Goroutine 完成    mainWg.Wait()    fmt.Println("All processing finished.")}

代码说明:

通道 (fileChan, lineChan): 它们是带缓冲的通道,用于在不同阶段之间传递数据。缓冲区的容量 (fileChanCapacity, lineChanCapacity) 起到关键的流量控制作用。当通道满时,发送方会被阻塞,直到有接收方取出数据,从而防止数据产生过快导致内存溢出。sync.WaitGroup: 用于等待所有Goroutine完成,确保主程序在所有任务都处理完毕后才退出。文件生产者: 负责扫描指定目录下的文件,并将每个文件的信息发送到 fileChan。完成后,它会关闭 fileChan,通知下游的消费者没有更多文件了。行生产者: 启动 numLineProducers 个Goroutine。它们从 fileChan 接收文件信息,读取文件内容,然后将每行数据发送到 lineChan。当 fileChan 关闭且所有数据被消费后,这些Goroutine会自动退出。行处理器: 启动 numLineWorkers 个Goroutine。它们从 lineChan 接收行数据,执行实际的业务处理逻辑。当 lineChan 关闭且所有数据被消费后,这些Goroutine也会自动退出。通道关闭时机: 这是一个关键点。fileChan 在文件生产者完成后关闭。lineChan 则需要等待所有行生产者都完成任务后才能关闭。示例中通过一个额外的Goroutine和 lineProducerWg 来协调 lineChan 的关闭时机,确保在所有行数据都已发送到 lineChan 并且所有行生产者都已退出后,才关闭 lineChan。这保证了所有行处理器都能接收到所有数据。

2.3 优点

流量控制 (Throttling):通过通道的缓冲机制,可以有效控制数据流速。当某个阶段的处理速度跟不上数据产生速度时,上游的发送方会被阻塞,从而避免资源过度消耗。资源优化:您可以根据系统实际的CPU核心数、内存大小等资源,调整 numLineProducers 和 numLineWorkers 的数量,以达到最佳的性能和资源利用率。解耦:各个处理阶段之间通过通道进行通信,相互独立,降低了代码的耦合度,易于维护和扩展。健壮性:即使面对突发的大量数据,系统也能通过流量控制保持稳定,避免崩溃。

3. 注意事项与最佳实践

通道容量选择: 缓冲通道的容量需要根据实际情况进行调整。过小的容量可能导致频繁阻塞,降低吞吐量;过大的容量可能增加内存占用。通常可以从较小的容量开始测试,逐步调整。Goroutine数量: 启动的Goroutine数量并非越多越好。对于CPU密集型任务,通常将Goroutine数量设置为 GOMAXPROCS (默认为CPU核心数) 或其倍数。对于I/O密集型任务,可以适当增加Goroutine数量,因为它们在等待I/O时可以切换到其他Goroutine。错误处理: 在实际应用中,每个处理阶段都应该包含健壮的错误处理机制。例如,文件读取失败、行解析错误等都应该被捕获和记录,并决定是跳过、重试还是终止整个流程。优雅关闭: 确保所有通道在不再需要发送数据时被关闭,并且所有Goroutine都能在通道关闭后优雅地退出。sync.WaitGroup 是实现这一点的常用工具。上下文取消 (Context Cancellation): 对于长时间运行或需要中断的流水线,可以引入 context.Context 来实现统一的取消信号

以上就是Go语言中处理海量数据:避免嵌套Goroutine,构建高效通道流水线的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1426915.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月16日 20:56:04
下一篇 2025年12月16日 20:56:15

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • SASS 中的 Mixins

    mixin 是 css 预处理器提供的工具,虽然它们不是可以被理解的函数,但它们的主要用途是重用代码。 不止一次,我们需要创建多个类来执行相同的操作,但更改单个值,例如字体大小的多个类。 .fs-10 { font-size: 10px;}.fs-20 { font-size: 20px;}.fs-…

    2025年12月24日
    000
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    300
  • 如何用 CSS Paint API 实现倾斜的斑马线间隔圆环?

    实现斑马线边框样式:探究 css paint api 本文将探究如何使用 css paint api 实现倾斜的斑马线间隔圆环。 问题: 给定一个有多个圆圈组成的斑马线图案,如何使用 css 实现倾斜的斑马线间隔圆环? 答案: 立即学习“前端免费学习笔记(深入)”; 使用 css paint api…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信