CSS 背景和边框

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

您可以添加不同类型的边框样式，包括由任何图像类型（从栅格图像到 CSS 渐变）的图像构成的边框。边框可以是方形或圆形，并且可以为每个角设置不同的半径。无论元素是否有可见边框，都可以将其圆角化。

阴影包括内阴影和外阴影、单个或多个阴影，以及实心或允许渐变到透明。外部阴影会像元素的边框框不透明一样投射阴影。内部阴影会像填充边缘外部的所有内容都不透明一样投射阴影。阴影可以是实心的，也可以包括一个扩展距离，阴影颜色过渡到透明。

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

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

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

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

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

参考

属性

数据类型

指南

学习 CSS：背景和边框

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

使用多个背景

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

调整背景图像大小

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

学习 CSS：盒子模型

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

使用 CSS 渐变

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

规范

规范
CSS 背景和边框模块 Level 3

另请参阅