css如何设置边框样式？边框的不同样式介绍（代码实例）
在网页开发中，边框是修饰元素外观的常用属性，通过CSS可以灵活设置边框的宽度、颜色和样式。其中边框样式是决定边框呈现效果的核心属性，不同的样式值可以让边框呈现出实线、虚线、点线等完全不同的视觉效果。下面将详细介绍CSS边框样式的设置方法，以及常见的边框样式类型。
一、CSS边框样式的核心属性
设置边框样式需要使用border-style属性，它是边框的必选属性，如果不设置该属性，即使定义了边框宽度和颜色，边框也不会显示。该属性可以接收单个值，也可以接收最多四个值，分别对应上、右、下、左四个方向的边框样式。
除了border-style，通常还会配合border-width（设置边框宽度）和border-color（设置边框颜色）一起使用，让边框效果更清晰。如果需要同时设置这三个属性，也可以使用简写属性border，语法为：border: width style color，三个值的顺序可以任意调整，浏览器会自动识别对应属性。
二、常见的边框样式类型
CSS中border-style支持多种样式值，下面是最常用的几种类型，每个类型都附带了对应的代码示例和效果说明。
1. 实线边框（solid）
这是最常用的边框样式，边框呈现为一条连续的实线，适合大多数常规元素的边框设置。
/* 给类名为box-solid的元素设置红色、2px宽的实线边框 */
.box-solid {
width: 200px;
height: 100px;
border: 2px solid #ff0000; /* 简写形式：宽度 样式 颜色 */
text-align: center;
line-height: 100px;
}2. 虚线边框（dashed）
边框由一段一段的短横线组成，常用于区分可选区域或者提示性内容的边框。
/* 给类名为box-dashed的元素设置蓝色、3px宽的虚线边框 */
.box-dashed {
width: 200px;
height: 100px;
border-width: 3px;
border-style: dashed; /* 单独设置边框样式 */
border-color: #0000ff;
text-align: center;
line-height: 100px;
}3. 点线边框（dotted）
边框由一个个小圆点组成，视觉效果比虚线更稀疏，适合轻量级的边框装饰。
/* 给类名为box-dotted的元素设置绿色、2px宽的点线边框 */
.box-dotted {
width: 200px;
height: 100px;
border: 2px dotted #00ff00;
text-align: center;
line-height: 100px;
}4. 双线边框（double）
边框会呈现两条平行的实线，两条线之间的间隔和线的宽度相等，总宽度等于border-width的值。
/* 给类名为box-double的元素设置紫色、4px宽的双线边框 */
.box-double {
width: 200px;
height: 100px;
border: 4px double #800080;
text-align: center;
line-height: 100px;
}5. 凹槽边框（groove）
边框看起来像是元素表面被刻了一个凹槽，有立体视觉效果，颜色会根据元素背景色产生明暗变化。
/* 给类名为box-groove的元素设置灰色、3px宽的凹槽边框 */
.box-groove {
width: 200px;
height: 100px;
border: 3px groove #cccccc;
text-align: center;
line-height: 100px;
}6. 垄状边框（ridge）
和凹槽边框相反，边框看起来像是元素表面凸起的一道垄，同样有立体效果。
/* 给类名为box-ridge的元素设置灰色、3px宽的垄状边框 */
.box-ridge {
width: 200px;
height: 100px;
border: 3px ridge #cccccc;
text-align: center;
line-height: 100px;
}7. 内阴影边框（inset）
边框效果让元素看起来像是被嵌入到页面中，整体有内凹的视觉感受。
/* 给类名为box-inset的元素设置灰色、3px宽的内阴影边框 */
.box-inset {
width: 200px;
height: 100px;
border: 3px inset #cccccc;
text-align: center;
line-height: 100px;
}8. 外阴影边框（outset）
和inset相反，边框效果让元素看起来像是凸出于页面，有外凸的视觉感受。
/* 给类名为box-outset的元素设置灰色、3px宽的外阴影边框 */
.box-outset {
width: 200px;
height: 100px;
border: 3px outset #cccccc;
text-align: center;
line-height: 100px;
}9. 无边框（none）
这是border-style的默认值，设置后不会显示任何边框，即使已经定义了边框宽度和颜色也不会生效。
/* 给类名为box-none的元素设置无边框 */
.box-none {
width: 200px;
height: 100px;
border: 2px solid #ff0000;
border-style: none; /* 覆盖之前的solid样式，最终无边框 */
text-align: center;
line-height: 100px;
}10. 隐藏边框（hidden）
效果和none类似，都不会显示边框，区别是hidden在表格边框冲突的场景下，优先级高于none，常用于表格边框合并的场景。
/* 给类名为box-hidden的元素设置隐藏边框 */
.box-hidden {
width: 200px;
height: 100px;
border: 2px solid #ff0000;
border-style: hidden; /* 最终无边框 */
text-align: center;
line-height: 100px;
}三、不同方向单独设置边框样式
如果只需要给元素的某一个方向设置边框样式，可以使用border-top-style、border-right-style、border-bottom-style、border-left-style单独设置，也可以用border-style接收多个值来批量设置。
当border-style接收1个值时，四个方向的边框样式相同；接收2个值时，第一个值对应上下方向，第二个值对应左右方向；接收3个值时，第一个值对应上，第二个值对应左右，第三个值对应下；接收4个值时，依次对应上、右、下、左四个方向。
/* 不同方向设置不同边框样式示例 */
.box-multi-style {
width: 200px;
height: 100px;
/* 上：solid 右：dashed 下：dotted 左：double */
border-style: solid dashed dotted double;
border-width: 2px;
border-color: #333333;
text-align: center;
line-height: 100px;
}四、完整HTML示例
下面是一个完整的HTML页面示例，展示了上述所有边框样式的实际效果，你可以直接复制代码到本地运行查看。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS边框样式示例</title>
<style>
.box {
width: 200px;
height: 100px;
margin: 15px;
text-align: center;
line-height: 100px;
float: left;
font-size: 14px;
}
.box-solid {
border: 2px solid #ff0000;
}
.box-dashed {
border: 2px dashed #0000ff;
}
.box-dotted {
border: 2px dotted #00ff00;
}
.box-double {
border: 4px double #800080;
}
.box-groove {
border: 3px groove #cccccc;
}
.box-ridge {
border: 3px ridge #cccccc;
}
.box-inset {
border: 3px inset #cccccc;
}
.box-outset {
border: 3px outset #cccccc;
}
.box-none {
border: 2px solid #ff0000;
border-style: none;
}
.box-hidden {
border: 2px solid #ff0000;
border-style: hidden;
}
.container {
overflow: hidden;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="box box-solid">solid 实线</div>
<div class="box box-dashed">dashed 虚线</div>
<div class="box box-dotted">dotted 点线</div>
<div class="box box-double">double 双线</div>
<div class="box box-groove">groove 凹槽</div>
<div class="box box-ridge">ridge 垄状</div>
<div class="box box-inset">inset 内阴影</div>
<div class="box box-outset">outset 外阴影</div>
<div class="box box-none">none 无边框</div>
<div class="box box-hidden">hidden 隐藏边框</div>
</div>
</body>
</html>五、注意事项
- 如果只设置了
border-width和border-color，没有设置border-style，边框不会显示，因为border-style默认值为none。 - 立体样式（groove、ridge、inset、outset）的显示效果和元素背景色有关，在浅色背景下效果更明显。
- 双线边框（double）的
border-width值不能太小，否则两条线会重叠，看不出双线效果，建议宽度至少设置为3px。 - 如果需要兼容旧版本浏览器，部分冷门的边框样式可能支持不全，实际使用时可以先测试目标浏览器的兼容性。