边框 border
border-width/style/color、各边独立设置、简写、圆角初识
边框 border
border 是元素的外框——可以设置宽度、样式、颜色，每边独立控制。
学完本章你将： 掌握 border-width/style/color、各边独立、简写。
基本边框
css
/* 分开写 */
.box {
border-width: 2px;
border-style: solid; /* solid/dashed/dotted/double/groove */
border-color: #333;
}
/* 简写（推荐）*/
.box { border: 2px solid #333; }边框样式
css
.solid { border: 2px solid black; } /* 实线 */
.dashed { border: 2px dashed red; } /* 虚线 */
.dotted { border: 2px dotted blue; } /* 点线 */
.double { border: 4px double green; } /* 双线 */
.none { border: none; } /* 无边框 */各边独立设置
css
/* 方式一：分别设置 */
.box {
border-top: 2px solid red;
border-right: 2px dashed green;
border-bottom: 2px dotted blue;
border-left: 2px double orange;
}
/* 方式二：简写不同值（上 右 下 左） */
.box {
border-width: 2px 4px 2px 4px;
border-style: solid dashed solid dashed;
border-color: red green blue orange;
}
/* 只设底部边框（常见） */
.underline { border-bottom: 1px solid #ddd; }