CSS边框基础

CSS边框的基本属性包括border-width、border-style和border-color。这三个属性可以组合使用，实现多样化的边框效果。

1. 边框宽度（border-width）

border-width属性定义了边框的宽度。它可以接受一个或多个值，分别对应上、右、下、左四个方向的边框宽度。以下是一些常用的值：

  • thin：比medium更窄。
  • medium：默认值，中等宽度。
  • thick：比medium更宽。
img {
  border-width: medium;
}

2. 边框样式（border-style）

border-style属性定义了边框的样式，如实线、虚线、点线等。以下是一些常用的边框样式：

  • none：无边框。
  • solid：实线边框。
  • dashed：虚线边框。
  • dotted：点线边框。
  • double：双实线边框。
img {
  border-style: dashed;
}

3. 边框颜色（border-color）

border-color属性定义了边框的颜色。它可以接受一个或多个颜色值，分别对应上、右、下、左四个方向的边框颜色。如果只指定一个颜色值，则应用于所有四个方向的边框。

img {
  border-color: red;
}

图片边框进阶技巧

1. 半透明边框

img {
  border: 2px solid rgba(255, 0, 0, 0.5);
}

2. 边框圆角

img {
  border-radius: 10px;
}

3. 边框阴影

img {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

总结