CSS 背景和边框

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

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

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

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

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

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

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

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

参考

属性

数据类型

指南

学习 CSS：背景与边框

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

多个背景的应用

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

调整背景图片的大小

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

学习 CSS：盒模型

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

使用 CSS 渐变

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

相关概念

规范

Specification
CSS Backgrounds and Borders Module Level 3

参见