边框
在 CSS 中，可以使用边框（Border）属性来设置元素的边框样式。边框属性可以控制边框的宽度、样式和颜色，让页面元素看起来更加美观和具有层次感。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框</title>
<style>
.content{
/* 在 CSS 中，通常需要同时设置border-width、border-style、border-color 这三个属性才能正确显示出边框 */
/* 边框宽度 */
border-top-width:5px;
border-right-width:5px;
border-bottom-width:5px;
border-left-width:5px;
border-width:5px; /* 四边都是 5px， 还可以用这三个关键字设置边框宽度：thick 、medium（默认值） 和 thin */
border-width:5px 10px; /* 上下 5px，左右 10px */
border-width:5px 10px 15px; /* 上 5px，左右 10px，下 15px */
border-width:5px 10px 15px 20px; /* 依次是：上右下左 */
/* 边框边线的样式 */
/* 更多样式见：https://www.runoob.com/css/css-border.html */
/* none:无边框
solid:实线
dotted:点线
dashed:线段
double:双实线
groove:凹槽边框
ridge:垄状边框
inset:嵌入边框
outset:外凸边框
hidden:隐藏边框
*/
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
border-style:solid; /* 四边都是 solid */
border-style:solid dotted; /* 上下 solid，左右 dotted */
border-style:solid dotted dashed; /* 上 solid，左右 dotted，下 dashed*/
border-style:solid dotted dashed double;/* 依次是：上右下左 */
/* 边框圆角 */
border-radius: 8px; /* 设置边框四角的弧度，50% 变成圆 */
border-radius: 8px 20px; /* 设置边框四角的弧度：左上和右下为 8px，右上和左下为 20px，即对角线 */
border-radius: 2px 2px 2px 2px; / *左上 右上 右下 左下，即顺时针 */
/* 边框颜色：border-color 单独使用是不起作用的，必须得先使用 border-style 来设置边框样式 */
border-top-color:red;
border-right-color:red;
border-bottom-color:red;
border-left-color:red;
border-color: red; /* 四边颜色都是红色 */
border-color:red blue; /* 上下 red，左右 blue */
border-color:red blue yellow; /* 上 red，左右 blue，下 yellow */
border-color:red blue yellow green; /* 依次是：上右下左 */
/* 边框宽度、样式、颜色一起设置 */
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
border:1px solid red; /* 必须按照这个顺序 */
border: 0; /* 去掉所有边框 */
/* 合并表格中单元格边框（两条变成一条） */
border-collapse:collapse;
/* 如果想要 input 没有边框，可以设置 input 标签的 border 为 0，如 border:0 */
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
