边框样式 - CSS

简介

边框是指围绕元素的线条。CSS 可以控制元素边框样式、宽度和颜色。

在CSS中，边框是使用 border 属性来设置的。该属性包含三个子属性：边框宽度、边框样式和边框颜色。

边框宽度

border-width 属性用于设置边框的宽度。宽度可以是0，也可以是长度值（如：px、em等）。你可以使用以下值：

• thin：细边框。
• medium：中等宽度边框。
• thick：粗边框。
• length：长度值。

/* 设置不同边的边框宽度 */
border-top-width: 2px;
border-right-width: 3px;
border-bottom-width: 4px;
border-left-width: 5px;

/* 设置所有四条边的边框宽度 */
border-width: 2px;

边框样式

border-style 属性用于设置边框的样式。你可以使用以下值：

• none：没有边框。
• dotted：点状边框。
• dashed：虚线边框。
• solid：实线边框。
• double：双线边框。
• groove：3D沟槽边框。
• ridge：3D脊边框。
• inset：3D内嵌边框。
• outset：3D突出边框。

/* 设置不同边的边框样式 */
border-top-style: solid;
border-right-style: dashed;
border-bottom-style: dotted;
border-left-style: double;

/* 设置所有四条边的边框样式 */
border-style: solid;

边框颜色

border-color 属性用于设置边框的颜色。颜色可以是任何 CSS 支持的颜色值，如名称、十六进制、RGB或RGBA等。

/* 设置不同边的边框颜色 */
border-top-color: red;
border-right-color: blue;
border-bottom-color: green;
border-left-color: yellow;

/* 设置所有四条边的边框颜色 */
border-color: black;

简写属性

CSS中还提供了一个简写属性 border 来同时设置边框的宽度、样式和颜色。该属性需要提供三个值，第一个值用于设置边框宽度，第二个值用于设置边框样式，第三个值用于设置边框颜色。

/* 设置所有四条边的边框 */
border: 2px solid black;

/* 设置不同边的边框 */
border-width: 2px;
border-style: solid;
border-color: black;

总结

CSS提供了多种方式来设置元素的边框样式。通过掌握边框宽度、边框样式、边框颜色、简写属性等等，你可以轻松地实现各种边框效果。