[分享]css两侧用虚线填充

CSS中有一种常见的效果，就是在元素的两侧使用虚线填充，来起到一种边框的作用。这种效果在设计中很常见，比如在日期选择器、表格或列表等地方都可以看到。要实现这种效果其实并不难，只需要借助CSS的bord...

CSS中有一种常见的效果，就是在元素的两侧使用虚线填充，来起到一种边框的作用。这种效果在设计中很常见，比如在日期选择器、表格或列表等地方都可以看到。

要实现这种效果其实并不难，只需要借助CSS的border属性做些小调整就行了。

 selector {
        border-style: dashed;
        border-width: 0 1px;
    } 

以上就是简单的代码实现，我们将边框样式设为虚线（dashed），宽度只需要在两侧设置即可，上下不需要边框。

这种方法还可以通过使用CSS变量来更灵活地控制虚线大小和颜色。

 selector {
        --border-width: 1px;
        --border-color: black;
        border-style: dashed;
        border-width: 0 var(--border-width);
        border-color: var(--border-color);
    } 

以上代码中，我们定义了两个CSS变量，--border-width表示虚线宽度，--border-color表示虚线颜色。我们使用这两个变量来控制边框的样式，同样是在两侧设置虚线。

需要注意的是，虚线填充只是一种效果，不会影响元素的实际大小，所以在布局时需要注意留出一定的空间。