css四边直线 |css 盒子模型

/* 设置元素四个方向边框的宽度 */
border-width: 1px;       /* 四边宽度都为1像素 */
border-width: 1px 2px;   /* 上下边框宽度为1像素，左右边框宽度为2像素 */
border-width: 1px 2px 3px; /* 上边框宽度为1像素，右下两个边框宽度为2像素，左边框宽度为3像素 */
border-width: 1px 2px 3px 4px; /* 上边框宽度为1像素，右边框宽度为2像素，下边框宽度为3像素，左边框宽度为4像素 */
/* 设置元素四个方向边框的颜色 */
border-color: #000000;  /* 四边颜色都为黑色 */
border-color: #000000 #cccccc; /* 上下边框颜色为黑色，左右两个边框颜色为灰色 */
border-color: #000000 #cccccc #ffffff; /* 上边框颜色为黑色，右下两个边框颜色为灰色，左边框颜色为白色 */
border-color: #000000 #cccccc #ffffff #333333; /* 上边框颜色为黑色，右边框颜色为灰色，下边框颜色为白色，左边框颜色为深灰色 */
/* 设置元素四个方向边框的样式 */
border-style: solid;    /* 四边都为实线 */
border-style: dotted;   /* 四边都为点状线 */
border-style: dashed;   /* 四边都为虚线 */
border-style: double;   /* 四边都为双实线 */
border-style: groove;   /* 四边都为凹槽状线 */
border-style: ridge;    /* 四边都为浮雕状线 */
border-style: inset;    /* 四边都为内嵌状线 */
border-style: outset;   /* 四边都为外凸状线 */

以上是一些常用的设置方式，当然还有其他更多的设置方式可以探索。在实际开发中，根据设计需求和视觉效果的要求，通过合理设置上下左右四边的宽度、颜色和样式，可以让网页看上去更加精致和美观。