CSS 背景和边框

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

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

<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 上查看源代码。

参考

属性

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

• background 简写

• background-position-x
• background-position-y
• background-position-inline
• background-position-block
• border-bottom-color
• border-bottom-style
• border-bottom-width

• border-bottom 简写

• border-left-color
• border-left-style
• border-left-width

• border-left 简写

• border-right-color
• border-right-style
• border-right-width

• border-right 简写

• border-top-color
• border-top-style
• border-top-width

• border-top 简写

• border-color 简写

• border-style 简写

• border-width 简写

• border 简写

• border-collapse
• border-bottom-left-radius
• border-bottom-right-radius
• border-top-left-radius
• border-top-right-radius

• border-radius 简写

• border-image-outset
• border-image-repeat
• border-image-slice
• border-image-source
• border-image-width

• border-image 简写

• box-shadow

数据类型

• <line-style> 枚举类型

指南

学习 CSS：背景与边框

解释如何使用 CSS 背景图像实现装饰性图像。

多个背景的应用

解释如何在元素上设置一个或多个背景。

调整背景图片的大小

描述如何更改背景图像的大小和重复行为。

学习 CSS：盒模型

解释边框以及其他模型属性如何影响 CSS 盒模型。

使用 CSS 渐变

解释如何创建 CSS 渐变背景图像。

相关概念

• border-block-end-color 属性

• border-block-start-color 属性

• border-inline-end-color 属性

• border-inline-start-color 属性

• border-block-end-style 属性

• border-block-start-style 属性

• border-inline-end-style 属性

• border-inline-start-style 属性

• border-block-end-width 属性

• border-block-start-width 属性

• border-inline-end-width 属性

• border-inline-start-width 属性

• border-start-start-radius 属性

• border-start-end-radius 属性

• border-end-start-radius 属性

• border-end-end-radius 属性

• box-sizing 属性

• box-decoration-break 属性

• text-shadow 属性

• <url> CSS 类型

• <color> 数据类型

• <image> 数据类型

• <position> 数据类型

• currentcolor 关键字

规范

参见

• 可以让你直观创建边框、圆角和阴影效果的交互工具：
  • Border-image 生成器
  • Border-radius 生成器
  • Box-shadow 生成器
• 使用 CSS 为 HTML 元素添加颜色，包括边框。
• drop-shadow() 过滤函数将下拉阴影效果应用于输入图像。该函数由 filter 和 backdrop-filter 属性使用。