css设置边框

作者：冷空气来袭发布日期:2025-07-22 浏览:33

/* 设置一个简单的边框 */
div {
  border: 2px solid black; /* 边框宽度为2px，样式为实线，颜色为黑色 */
}

/* 设置不同方向的边框 */
div {
  border-top: 1px dashed red;    /* 上边框：1px宽，虚线，红色 */
  border-right: 2px dotted blue; /* 右边框：2px宽，点线，蓝色 */
  border-bottom: 3px double green; /* 下边框：3px宽，双线，绿色 */
  border-left: 4px groove yellow;  /* 左边框：4px宽，凹槽效果，黄色 */
}

/* 圆角边框 */
div {
  border: 2px solid #8AC007;
  border-radius: 15px; /* 设置圆角半径为15px */
}

/* 边框阴影 */
div {
  border: 2px solid black;
  box-shadow: 10px 10px 5px grey; /* 水平偏移10px，垂直偏移10px，模糊半径5px，颜色为灰色 */
}

以上代码展示了如何使用CSS设置不同类型的边框，包括简单的边框、不同方向的边框、圆角边框以及带阴影的边框。

上一篇：css禁止选中

下一篇：css动画keyframes