CSS | 边框样式属性

CSS 边框样式属性用于定义 HTML 元素的边框样式。

border-style 属性

border-style 属性定义 HTML 元素边框的样式。

可选值

• none：无边框
• hidden：隐藏边框
• dotted：点线边框
• dashed：虚线边框
• solid：实线边框
• double：双线边框
• groove：凹槽边框
• ridge：垄状边框
• inset：内凹边框
• outset：外凸边框

示例

/* 实线边框 */
border-style: solid;

/* 点线边框 */
border-style: dotted;

/* 双线边框 */
border-style: double;

border-width 属性

border-width 属性定义 HTML 元素边框的宽度。

可选值

• thin：细边框
• medium：中等边框
• thick：粗边框
• px：指定像素宽度（如 1px）

示例

/* 细边框 */
border-width: thin;

/* 2px 宽度 */
border-width: 2px;

/* 1rem 宽度 */
border-width: 1rem;

border-color 属性

border-color 属性定义 HTML 元素边框的颜色。

可选值

• color：指定颜色值（如 red、#ffffff、rgb(255, 0, 0)）

示例

/* 红色边框 */
border-color: red;

/* 白色边框 */
border-color: #ffffff;

/* RGB 值边框 */
border-color: rgb(255, 0, 0);

border 属性

border 属性可以同时设置边框的样式、宽度和颜色。

示例

/* 宽度为 2px、实线、红色边框 */
border: 2px solid red;

/* 中等宽度、点线、黑色边框 */
border: medium dotted #000000;

总结

CSS 边框样式属性有 border-style、border-width、border-color 和 border 四个，分别用于定义边框的样式、宽度和颜色。通过组合使用这些属性，可以轻松实现多种边框样式。