css 边框圆角

作者：角落里哭泣发布日期:2025-07-11 浏览:69

/* 设置元素的边框和圆角 */
.box {
  /* 设置边框样式：宽度、样式、颜色 */
  border: 2px solid black;

  /* 设置圆角半径，四个角可以分别设置不同的值 */
  border-radius: 10px;

  /* 如果需要所有角都相同，可以直接用一个值 */
  /* border-radius: 15px; */

  /* 如果需要不同角有不同的圆角半径，可以分别设置 */
  /* border-radius: 10px 20px 10px 20px; */

  /* 如果需要更复杂的圆角效果，还可以设置斜角 */
  /* border-radius: 10px / 20px; */
}

/* 示例HTML代码 */
<div class="box">
  这是一个带有边框和圆角的盒子
</div>

解释说明：

border 属性用于定义元素的边框，包括边框的宽度、样式和颜色。
border-radius 属性用于设置元素的圆角。可以通过一个值来设置所有角的圆角半径，也可以分别为每个角设置不同的半径。
在实际使用中，border-radius 可以根据需求调整，以实现不同的视觉效果。

上一篇：css dvh

下一篇：下划线 css