css 三个边框比例话

在CSS中，我们经常会用到边框(border)样式来美化我们的页面，其中包括了三个关键属性：border-width(边框宽度)、border-style(边框样式)和border-color(边框颜色)。

边框宽度(border-width)指的是边框线条的粗细程度，可以设置为固定的像素值，也可以使用百分比和em等相对单位进行设置。同时，我们还可以对不同的边框宽度进行单独设置：

div {
  border-width: 1px 2px 3px 4px;
}

上面的代码表示这个div元素的上边框宽度为1px，右边框宽度为2px，下边框宽度为3px，左边框宽度为4px。

边框样式(border-style)指的是边框线条的样式，有solid(实线)、dashed(虚线)、dotted(点线)、double(双线)、groove(凹槽线)、ridge(凸槽线)、inset(内嵌线)和outset(外凸线)等多种样式可供选择。如：

div {
  border-style: solid;
}

这行代码表示这个div元素的边框样式为实线。

边框颜色(border-color)指的是边框线条的颜色，可以使用颜色名称、十六进制颜色代码或RGB颜色值等方式进行设置。同时也可以对不同边框颜色进行单独设置：

div {
  border-color: red green blue yellow;
}

这行代码表示这个div元素的上边框颜色为红色，右边框颜色为绿色，下边框颜色为蓝色，左边框颜色为黄色。

通过合理的边框宽度、样式和颜色的搭配，我们可以实现各种不同的边框效果，使我们的页面更加生动有趣。