css怎么制作边框

使用 border 属性制作边框

通过 border 属性可以快速为元素添加边框。该属性是 border-width、border-style 和 border-color 的简写形式。

div {
  border: 2px solid #000000; /* 宽度为2px，实线，黑色 */
}

支持多种边框样式（dashed 虚线、dotted 点线等），颜色可使用十六进制、RGB 或颜色名称。

单独设置边框各方向

通过 border-top、border-right、border-bottom 和 border-left 分别控制四个方向的边框。

div {
  border-top: 1px dashed red;
  border-right: 3px double blue;
}

圆角边框（border-radius）

使用 border-radius 属性实现圆角效果，值可以是像素或百分比。

div {
  border: 1px solid #333;
  border-radius: 10px; /* 统一圆角 */
  border-radius: 5px 10px 15px 20px; /* 分别设置四个角 */
}

边框阴影（box-shadow）

通过 box-shadow 为边框添加阴影效果，参数依次为水平偏移、垂直偏移、模糊半径、颜色。

div {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

渐变或图片边框

结合 border-image 属性实现渐变或图片边框。需先定义图片或渐变，再设置切片和重复方式。

div {
  border: 10px solid transparent;
  border-image: linear-gradient(45deg, red, blue) 1;
}

透明边框与背景裁剪

通过 transparent 设置透明边框，搭配 background-clip 控制背景显示范围。

div {
  border: 4px solid transparent;
  background-clip: padding-box; /* 背景仅延伸到内边距 */
}