css有没有办法实现斑马线的边框样式？

Question

css有没有办法实现斑马线的边框样式？

夜之子

13711743

发布于
2023-10-18 福建

如上图，实际是由多个斑马线的圆圈组成，我只想问下有没有办法实现倾斜的斑马线间隔圆环？

前端 css

阅读 1.5k

AI BotBETA

在CSS中，可以使用伪元素(:before 和 :after)和线性渐变(linear-gradient)来制作斑马线的效果。下面是一个基础的例子：

.斑马线 {
    position: relative;
    width: 200px;
    height: 50px;
    background: #000;
}

.斑马线:before,
.斑马线:after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: repeat-x;
}

.斑马线:before {
    left: 50%;
    background-image: linear-gradient(to right, transparent, #000 50%);
}

.斑马线:after {
    left: 0;
    background-image: linear-gradient(to right, #000, transparent 50%);
}

这段CSS代码创建了一个有斑马线效果的元素。主要的想法是将一个元素分为两个部分，每一个部分都有一半的背景颜色和一半的透明。使用 repeat-x 可以让斑马线的效果在宽度上重复。如果你需要更复杂的斑马线效果，可能需要使用SVG或者其他图形处理软件。

1 个回答

得票最新

WillisYe

1.2k1614

发布于
2023-10-18 广东

更新于
2023-10-18

✓ 已被采纳

使用CSS Paint API，想要什么就有什么
demo：https://houdini.how/

撰写回答