在CSS中，我们可以通过border属性直接设置元素的边框样式，其中solid和dashed是两种最常用的边框类型，solid表示实线边框，dashed表示虚线边框，二者都可以通过border属性的组合参数快速配置。
border属性的基本语法
border是CSS的简写属性，可以同时设置边框的宽度、样式和颜色，基础语法格式如下：
/* border简写语法 */ border: border-width border-style border-color;
其中border-style就是用来指定边框样式的属性，solid和dashed都是该属性的合法取值，也可以单独通过border-style属性设置边框样式，单独设置时不会影响已有的边框宽度和颜色。
设置solid实线边框
solid是最基础的边框样式，会显示为连续的实线，适合用于需要明确边界的元素，比如卡片容器、输入框等。我们可以通过以下方式设置solid边框：
1. 使用border简写属性
/* 设置2px宽、实线、蓝色的边框 */
.box-solid {
width: 200px;
height: 100px;
border: 2px solid #1890ff;
}
2. 单独设置border-style为solid
/* 单独设置边框样式为实线，宽度和颜色已提前定义 */
.box-solid-single {
width: 200px;
height: 100px;
border-width: 2px;
border-color: #1890ff;
border-style: solid;
}
设置dashed虚线边框
dashed边框会显示为一段一段的虚线，适合用于需要弱化边界或者提示非必填、次要元素的场景，比如提示框、辅助说明区域等。设置方式和solid类似，只需要把border-style的取值改为dashed即可。
1. 使用border简写属性设置dashed
/* 设置1px宽、虚线、灰色的边框 */
.box-dashed {
width: 200px;
height: 100px;
border: 1px dashed #999999;
}
2. 单独设置border-style为dashed
/* 单独设置边框样式为虚线 */
.box-dashed-single {
width: 200px;
height: 100px;
border-width: 1px;
border-color: #999999;
border-style: dashed;
}
单独设置某一边的边框样式
如果只需要给元素的某一边设置solid或dashed边框，可以使用对应的单边border属性，比如border-top、border-bottom等，示例如下：
/* 只给底部设置2px实线边框 */
.bottom-solid {
width: 200px;
height: 100px;
border-bottom: 2px solid #ff4d4f;
}
/* 只给左侧设置1px虚线边框 */
.left-dashed {
width: 200px;
height: 100px;
border-left: 1px dashed #52c41a;
}
两种边框的常见搭配方案
在实际开发中，solid和dashed边框通常会搭配其他CSS属性实现更好的效果，常见的搭配场景如下：
- 卡片容器使用solid边框搭配圆角
border-radius，让容器边缘更柔和 - 提示区域使用dashed边框搭配浅色背景，区分于主要内容区域
- 表单元素的聚焦状态切换，默认用dashed边框，聚焦后切换为solid边框
需要注意的是，dashed边框的虚线间隔是由浏览器默认控制的，不同浏览器下可能会有细微差异，如果需要自定义虚线的长度和间隔，可以使用border-image属性配合渐变实现，不过大部分常规场景下默认的dashed效果已经足够使用。