CSS设置边框

一、边框样式

CSS提供了多种边框样式，包括实线（solid）、虚线（dashed）、点线（dotted）、双线（double）等。设置边框样式可以使用border-style属性，示例如下：

border-style: solid; /* 实线 */
border-style: dashed; /* 虚线 */
border-style: dotted; /* 点线 */
border-style: double; /* 双线 */

同时可以通过缩写的方式设置边框样式：

border: 2px dashed #ccc; /* 2像素宽的虚线边框，颜色为灰色 */

在上面的示例中，border样式同时设置了边框宽度、样式和颜色。

二、边框宽度

CSS的边框宽度分为细（thin）、中（medium）、粗（thick）、像素值等多种方式。设置边框宽度可以使用border-width属性，示例如下：

border-width: 2px; /* 2像素宽 */
border-width: medium; /* 中等宽度 */
border-width: thin; /* 细边框 */
border-width: 1px 2px 3px 4px; /* 上、右、下、左的边框宽度 */

以上示例中，设置边框宽度可以通过像素值、关键字和多个值的方式实现。如果只设置一个值，则四个边框都使用相同的宽度。

三、边框颜色

CSS的边框颜色支持十六进制、RGB、颜色名等多种方式。设置边框颜色可以使用border-color属性，示例如下：

border-color: #ccc; /* 灰色边框 */
border-color: red; /* 红色边框 */
border-color: rgb(255, 0, 0); /* 红色边框 */
border-color: #f00 #0f0 #00f; /* 上、右、下、左的边框颜色 */

以上示例中，设置边框颜色可以通过十六进制、颜色名、RGB等方式实现。如果只设置一个值，则四个边框都使用相同的颜色。

四、边框圆角

CSS的边框圆角可以通过border-radius属性实现。该属性可以设置一个或四个值，第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。示例如下：

border-radius: 10px; /* 所有角都为圆角，半径为10像素 */
border-radius: 10px 20px; /* 左上角和右下角为圆角，半径分别为10像素和20像素 */
border-radius: 10px 20px 30px; /* 左上角、右上角和左下角为圆角，半径分别为10像素、20像素和30像素 */
border-radius: 10px 20px 30px 40px; /* 所有角都为圆角，半径分别为10像素、20像素、30像素和40像素 */

以上示例中，可以通过设置border-radius属性实现边框圆角。默认情况下，边框的角是直角的。