Javascript 在CSS3或JS中重复对角线虚线？_Javascript_Html_Css

Javascript 在CSS3或JS中重复对角线虚线？

javascript html css

Javascript 在CSS3或JS中重复对角线虚线？,javascript,html,css,Javascript,Html,Css,我仍然是html/css/js方面的新手，我正试图找到解决问题的方法，而我通常用一种非常糟糕的方式来解决问题。通常情况下，我会花一个小时尝试创建某种无缝的photoshop模式，然后以.png格式重复它。看到人们用CSS3（动画，什么！）做了这么多了不起的事情，我觉得这不会太难。但我不知道如何开始我想说的是：基本上，这种模式是：////（重复：//////），但这些线中的每一条都是虚线，而不是实线如下所示：为此，我将使用一个SVG它在CSS中的外观如下： .your_element{ b

我仍然是html/css/js方面的新手，我正试图找到解决问题的方法，而我通常用一种非常糟糕的方式来解决问题。通常情况下，我会花一个小时尝试创建某种无缝的photoshop模式，然后以.png格式重复它。看到人们用CSS3（动画，什么！）做了这么多了不起的事情，我觉得这不会太难。但我不知道如何开始

我想说的是：

基本上，这种模式是：////（重复：//////），但这些线中的每一条都是虚线，而不是实线

如下所示：

为此，我将使用一个

SVG

它在CSS中的外观如下：

.your_element{
background-image: url(data:image/jpeg;base64,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);
}

您可以使用此工具转换图像：

您也可以在画布中创建，但我相信从性能角度来看，这样做的成本要高得多。

为此，我只需使用

SVG

，它在CSS中的外观如下所示：

.your_element{
background-image: url(data:image/jpeg;base64,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);
}

您可以使用此工具转换图像：

您也可以在画布上创建，但我相信从性能角度来看，这样做的成本要高得多。

您可以设置2个渐变作为背景，1个创建线条（透明），另一个创建通过透明线看到的剥离图案，以创建虚线的幻觉

CSS

可以设置2个渐变作为背景，1个创建线条（透明），另一个创建通过透明线看到的剥离图案，以创建虚线的幻觉

CSS

谢谢出于某种原因，我假设以画布方式进行操作会降低性能密集度。为什么要将其转换为SVG？这并没有添加am http请求，基本上只是使用一个图像。谢谢。出于某种原因，我假设以画布方式进行操作会降低性能密集度。为什么要将其转换为SVG？这并没有添加am http请求，基本上只是使用一个图像……我的屏幕一直都是这样的：（请看一看CSS。请确保缩小，您将看到使用CSS创建的粉色和桃红色斜条纹背景。它很可爱……我的屏幕一直都是这样的：（请看一下的CSS。请确保缩小，您将看到使用CSS创建的粉色和桃红色斜条纹背景。它很可爱。在Safari中不起作用。显然，浏览器扩展仍然是stephenmurdoch（）的链接。）使用这种方法工作。使用扩展。在Safari中不起作用。显然仍然是浏览器扩展，因为stephenmurdoch（）的链接使用这种方法。使用扩展。