如何使用 CSS 增加虚线边框点之间的空间？

任务是增加虚线边框点之间的空间。您可以使用 background-size 属性调整大小，使用 background-image 属性调整比例，以及使用线性渐变百分比调整比例。因此，您可以使用多个背景拥有多个虚线边框。在这个例子中，我们有一条 3px 点和 7px 间距的虚线。

句法：

这适用于水平和垂直边界：

• 水平的

  background-image: linear-gradient(to right, black 30%, rgba(255, 255, 255, 0) 0%);
  background-size: 10px 3px;

• 垂直的

  background-image: linear-gradient(black 33%, rgba(255, 255, 255, 0) 0%);
  background-size: 3px 10px;

让我们看看这个例子，它适用于水平和垂直边界。

增加虚线边框的点之间的空间的示例：

下面给出的文件包含 CSS 属性。此文件以 .css 扩展名保存。例如：

样式文件

下面是使用创建的外部样式表的 HTML 文件。

• link 标签用于将外部样式表与 HTML 网页链接起来。

    
        
          
    
    
        
GEEKSFORGEEKS
 
        
no border
        
dotted border
        

             dotted border with gradient
        

             dotted spaced border
        
no border
        
dotted border
        

             dotted border with gradient
        

             dotted spaced border
    

完整代码：

    
        
        
    
    
        
GEEKSFORGEEKS
        
no border
        
dotted border
        

          dotted border with gradient
        

          dotted spaced border
        
no border
        
dotted border
        

          dotted border with gradient
        

          dotted spaced border
    

输出看起来像：

输出