css border

作者：此岸蝶恋花发布日期:2025-12-22 浏览:114

/* 示例代码：使用 CSS border 属性设置元素的边框 */

/* 1. 简单的实线边框 */
.box {
    border: 2px solid black;
}

/* 解释：上面的代码设置了 .box 类的元素有一个 2 像素宽的黑色实线边框。 */

/* 2. 不同方向的边框样式 */
.box2 {
    border-top: 5px dashed red;
    border-right: 3px dotted blue;
    border-bottom: 4px double green;
    border-left: 6px groove yellow;
}

/* 解释：上面的代码为 .box2 类的元素设置了不同方向和样式的边框。每个方向可以独立设置宽度、样式和颜色。 */

/* 3. 圆角边框 */
.box3 {
    border: 2px solid #3498db;
    border-radius: 10px;
}

/* 解释：上面的代码为 .box3 类的元素设置了 2 像素宽的蓝色实线边框，并且边框是圆角的，圆角的半径是 10 像素。 */

上一篇：postcss

下一篇：css position