CSS 背景和边框

CSS 背景和边框模块为元素提供了添加边框、圆角和阴影的属性。

你可以为元素添加各种类型的边框样式，涵盖从光栅图像到 CSS 渐变在内的任意类型图片作为边框素材。边框可以设置为方形或圆角，且每个角均可独立指定不同的圆角半径。无论元素是否有可见边框，均支持对其进行圆角化处理。

box-shadow 包括内阴影和外阴影、单个或多个阴影，以及实心或允许渐变为透明的阴影。外部 box-shadow 会投射出一种阴影，就好像元素的 border-box 是不透明的。内部 box-shadow 会投射出一种阴影，就好像填充边缘之外的所有内容都是不透明的。阴影可以是实心的，也可以包括过渡到透明的阴影颜色的扩散距离。

此模块中的属性还允许你定义 <table> 中的单元格应具有共享边框还是单独边框。

背景、边框和盒子阴影的实际应用

此边框、背景和阴影示例由线性渐变和径向渐变组成的居中背景图像组成。一系列框阴影使边框看起来像是“弹出”的。左侧元素设置了边框图像。右侧元素具有圆角虚线边框。

<article>
  <div></div>
  <div></div>
</article>

article {
  display: flex;
  gap: 10px;
}
div {
  color: #58ade3;
  height: 320px;
  width: 240px;
  padding: 20px;
  margin: 10px;
  border: dotted 15px; /* defaults to `currentcolor` */
  border-radius: 100px 0;
  background-image:
    radial-gradient(
      circle,
      transparent 60%,
      currentcolor 60% 70%,
      transparent 70%
    ),
    linear-gradient(45deg, currentcolor, white),
    linear-gradient(transparent, transparent);
  /* the third transparent background image was added to provide space for the background color to show through */
  background-color: currentcolor;
  background-position: center;
  background-size:
    60px 60px,
    120px 120px;
  background-clip: content-box, content-box, padding-box;
  box-shadow:
    inset 5px 5px 5px rgb(0 0 0 / 0.4),
    inset -5px -5px 5px rgb(0 0 0 / 0.4),
    5px 5px 5px rgb(0 0 0 / 0.4),
    -5px -5px 5px rgb(0 0 0 / 0.4);
}
div:first-of-type {
  border-radius: 0;
  border-image-source: repeating-conic-gradient(
    from 3deg at 25% 25%,
    currentColor 0 3deg,
    transparent 3deg 6deg
  );
  border-image-slice: 30;
}

背景图像使用 background-image 定义。图像使用 background-position 居中。为多个背景图像使用 background-clip 属性的不同值，使背景图像保持在内容框内。背景颜色被裁剪到填充框，防止背景通过 border-image 和 dotted border 的透明部分显示出来。右侧元素中的圆角使用 border-radius 属性创建。使用单个 box-shadow 声明设置所有阴影，包括内阴影和外阴影。

要查看此示例的代码，请在 GitHub 上查看源代码。