CSS（非）实用技巧——背景与边框

这篇博客介绍了CSS中关于背景与边框的一些非传统实用技巧，包括如何实现半透明边框（使用`background-clip`和`box-shadow`）、多重边框（通过`box-shadow`）以及条纹背景（利用`linear-gradient`和`repeating-linear-gradient`）。同时，还探讨了如何创建网格和波点图案，以及制作棋盘效果的创新方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考

《CSS揭秘》（《CSS Secrets》）

背景

CSS3

尽管“CSS3”这个名词非常流行，但它严格意义上并不是一个规范。因为在CSS2之后，CSS这门语言已经庞大到无法放进单个规范中了，CSS工作组将其分成不同的模块。

其中在CSS2.1已有基础上发展的模块升级到了3这个版本，如：

CSS 语法(http://w3.org/TR/css-syntax-3)
CSS 层叠与继承(http://w3.org/TR/css-cascade-3)
CSS 颜色(http://w3.org/TR/css3-color)
选择符(http://w3.org/TR/selectors)
CSS 背景与边框(http://w3.org/TR/css3-background)
CSS 值与单位(http://w3.org/TR/css-values-3)
CSS 文本排版(http://w3.org/TR/css-text-3)
CSS 文本装饰效果(http://w3.org/TR/css-text-decor-3)
CSS 字体(http://w3.org/TR/css3-fonts)
CSS 基本 UI 特性(http://w3.org/TR/css3-ui)

此外，还有新增的一部分模块，其版本号从1开始，如：

CSS 变形(http://w3.org/TR/css-transforms-1)
图像混合效果(http://w3.org/TR/compositing-1)
滤镜效果(http://w3.org/TR/filter-effects-1)
CSS 遮罩(http://w3.org/TR/css-masking-1)
CSS 伸缩盒布局(http://w3.org/TR/css-flexbox-1)
CSS 网格布局(http://w3.org/TR/css-grid-1)

所以，CSS3实际上是一个非正式的集合，它包括 CSS 规范第三版(Level 3)再加上一些版本号还是 1 的新规范。

半透明边框

问题

从CSS2.1中可知，默认状态下 background 会延伸到 border 的下面。

background-color: rgba(95, 158, 160, 1);
border: rgba(210, 105, 30, 0.5) dashed 10px;

background-clip 方案

如图，即使 border 用 rgba 或者 hsla 设置为半透明，也只能看到所在容器的背景。如果想看到父容器的背景，我们可以通过 background-clip 属性来调整上述默认行为所带来的不便。这个属性的初始值是 border-box，意味着背景会覆盖 border box。如果不希望背景侵入边框所在的范围，我们要做的就是把它的值设为 padding-box，这样浏览器就会用内边距的外沿来把背景裁切掉。

background-color: rgba(95, 158, 160, 1);
border: rgba(210, 105, 30, 0.5) solid 10px;
background-clip: padding-box;

box-shadow 方案

使用 box-shadow 可以实现同上面同样的效果，box-shadow 还接受第四个参数(称作“扩张半径”)，通过指定正值或负值，可以让投影面积加大或者减小。一个正值的扩张半径加上两个为零的偏移量以及为零的模糊值，得到的“投影”其实就像一道实线边框。

唯一与 border 不同的是，box-shadow 不会影响布局，可以通过外边距来实现布局的一致性。

background-color: rgba(95, 158, 160, 1);
box-shadow:0 0 0 10px rgba(255, 255, 255, 0.5);
margin: 10px;

多重边框

问题

CSS3中并没有提供元素多重 border 的实现方案，实际场景中我们可以使用多个元素来模拟多重边框，但这样显然不够优雅。

box-shadow 方案

box-shadow 的好处在于，它支持逗号分隔语法，我们可以创建任意数量的边框（投影）。

background-color: yellowgreen;
box-shadow: 0 0 0 10px #655, 
            0 0 0 20px deeppink, 
            0 2px 5px 25px rgba(0, 0, 0, .6);

唯一需要注意的是，box-shadow 是层层叠加的，第一层投影位于最顶层，依次类推。因此，需要按此规律调整扩张半径。比如说，在前面的代码中，我们想在外圈再加一道 5px 的外框，那就需要指定扩张半径的值为 25px(20px+5px)。

outline 方案

使用 outline + border 的方法同样可以实现上面的效果。不过 outline + border 只适用于两层边框的场景。

border: solid 10px #655;
outline: solid 10px deeppink;
box-shadow: 0 2px 5px 15px rgba(0, 0, 0, .6);

outline 的另一个好处在于，可以通过 outline-offset 属性来控制它跟元素边缘之间的间距，这个属性甚至可以接受负值。可以实现简单的缝边效果。

background-color: #655;
outline: dashed 1px white;
outline-offset: -10px;
border-radius: 5px;

条纹背景

问题

通常在网页中实现条纹背景的方法，就是使用图片，但是不管是位图还是SVG，如果涉及到调整的时候，都比较繁琐，有没有可能使用CSS实现条纹背景。

linear-gradient 方案

linear-gradient 是一个线性渐变的方法。一般我们用其实现渐变的背景色。

background: linear-gradient(#fb3, #58a);

linear-gradient 的颜色参数后还可以跟一个色标参数，表示颜色从什么位置开始渐变。我们拉近色标的距离（给两个颜色分别加上40%和60%的色标值），发现出现了实色的部分。

“如果多个色标具有相同的位置，它们会产生一个无限小的过渡区域，过渡的起止色分别是第一个和最后一个指定值。从效果上看，颜色会在那个位置突然变化，而不是一个平滑的渐变过程。”

——CSS 图像(第三版)(http://w3.org/TR/css3-images)

background: linear-gradient(#fb3 50%, #58a 50%);

因为渐变是一种由代码生成的图像，我们能像对待其他任何背景图像那样对待它，而且还可以通过 background-size 来调整其尺寸，从而实现水平条纹。

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

如果想实现三种颜色的条纹，要写成下面这样。

色标小于前一个色标值，会被前面的颜色覆盖，所以表现出来的结果还是条纹状。

“如果某个色标的位置值比整个列表中在它之前的色标的位置值都要小，则该色标的位置值会被设置为它前面所有色标位置值的最大值。”

——CSS 图像(第三版)(http://w3.org/TR/css3-images)

background: linear-gradient(#fb3 33%, #58a 0, #58a 67%, yellowgreen 0);
background-size: 100% 30px;

linear-gradient 还有一个表示方向的参数，可以实现垂直方向的条纹。

background: linear-gradient(90deg, #fb3 50%, #58a 50%);
background-size: 30px 100%;

如果想实现斜的条纹，比如将角度设为45deg。

background: linear-gradient(45deg, #fb3 50%, #58a 50%);
/* background-size: 30px 100%; */
/* background-size: 100% 30px; */
background-size: 30px 30px;

由于 background 的铺排是以切片横向和纵向重复排列组成的，就向上面这样。我们可以利用这个性质来伪造一个斜向条纹，只需要让每个切片之间无缝衔接就可以实现。

background: linear-gradient(45deg,
                    #fb3 25%, #58a 0, #58a 50%,
                    #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

但是显然上面这种方法很不体面，而且改变角度、宽度都需要重新计算，很不方便。实现斜向条纹还有一种更好的方法，就是使用 repeating-linear-gradient，重复线性渐变完美适用于条纹效果。

background: repeating-linear-gradient(30deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

网格

水平和垂直条纹叠加可以形成网格。

background: white;
background-image: 
    linear-gradient(90deg,rgba(200, 0, 0, .5) 50%, transparent 0),
    linear-gradient(rgba(200, 0, 0, .5) 50%, transparent 0);
background-size: 30px 30px;

使用固定长度的线条可以实现类似图纸辅助线的网格。

background: #58a;
background-image:
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px, transparent 0);
background-size: 30px 30px;

我们甚至可以把两幅不同线宽、不同颜色的网格图案叠加起来，得到一个更加逼真的蓝图网格。

background: #58a;
background-image:
    linear-gradient(white 2px, transparent 0),
    linear-gradient(90deg, white 2px, transparent 0),
    linear-gradient(hsla(0, 0%, 100%, .3) 1px, transparent 0),
    linear-gradient(90deg, hsla(0, 0%, 100%, .3) 1px, transparent 0);
background-size: 
    75px 75px, 
    75px 75px, 
    15px 15px, 
    15px 15px;

波点

radial-gradient 是径向渐变，允许我们创建圆形，实现圆点阵列。

background: #655;
background-image: 
    radial-gradient(#db8 30%, transparent 0),
    radial-gradient(#db8 30%, transparent 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;

棋盘

要想画出棋盘，必须是相邻两格颜色不同，从网格的第一张图可以看出，利用透明度形成的网格一共有三种颜色，并不是我们想要的棋盘，所以绘制棋盘我们采取将两个三角形拼接成一格的方法。

background-color: white;
background-image: 
    linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0),
    linear-gradient(45deg, #aaa 25%, transparent 0, transparent 75%, #aaa 0);
background-size: 30px 30px;
background-position: 0 0, 15px 15px;