View in EnglishAlways switch to English

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 和dottedborder 的透明部分显示出来。右侧元素中的圆角使用border-radius 属性创建。使用单个box-shadow 声明设置所有阴影，包括内阴影和外阴影。

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