菜鸟教程
教程 css tutorial

边框样式

CSS 的边框属性用于控制元素边框的宽度、颜色、样式等，常用属性包括 border-width、border-style 和 border-color。

1. 边框宽度（border-width）

指定边框的粗细：

css 
border-width: 2px;

2. 边框样式（border-style）

边框的样式，如实线、虚线、点线等：

css 
border-style: solid; /* 实线 */
border-style: dashed; /* 虚线 */
border-style: dotted; /* 点线 */
border-style: double; /* 双线 */
border-style: groove; /* 凹槽效果 */
border-style: ridge; /* 脊状效果 */
border-style: inset; /* 内嵌效果 */
border-style: outset; /* 外凸效果 */
border-style: none; /* 无边框 */

3. 边框颜色（border-color）

设置边框颜色：

css 
border-color: #333;
border-color: red;

4. 复合写法

简写方式同时设置宽度、样式和颜色：

css 
border: 2px dashed blue;

边框样式示例

在线代码演示
源码 
<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<title>边框样式示例</title>
<style>
.solid {
border: 2px solid #4caf50;
padding: 10px;
margin-bottom: 10px;
}


.dashed {
  border: 2px dashed #2196f3;
  padding: 10px;
  margin-bottom: 10px;
}

.dotted {
  border: 2px dotted #f44336;
  padding: 10px;
  margin-bottom: 10px;
}

.double {
  border: 4px double #9c27b0;
  padding: 10px;
  margin-bottom: 10px;
}

.groove {
  border: 4px groove #ff9800;
  padding: 10px;
  margin-bottom: 10px;
}

.ridge {
  border: 4px ridge #795548;
  padding: 10px;
  margin-bottom: 10px;
}

.inset {
  border: 4px inset #607d8b;
  padding: 10px;
  margin-bottom: 10px;
}

.outset {
  border: 4px outset #009688;
  padding: 10px;
  margin-bottom: 10px;
}



</style>
</head>


<body>
<div class="solid">实线边框</div>
<div class="dashed">虚线边框</div>
<div class="dotted">点线边框</div>
<div class="double">双线边框</div>
<div class="groove">凹槽边框</div>
<div class="ridge">脊状边框</div>
<div class="inset">内嵌边框</div>
<div class="outset">外凸边框</div>
</body>


</html>

相关内容