by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12438
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、前言

背景色扩展我们可以使用outline或者box-shadow属性，但是，如果希望是单个方向的扩展，同时不影响现有布局，该如何实现呢？

比方说下面这个使用场景，底部区域sticky粘性定位。

但是由于外部容器设置了padding，导致会有内容从底部区域穿透出来，看起来体验就不怎么好。

比较常用的方法是设置margin负值 + padding值修正。

但这种方法并不怎么优雅，最简单的办法其实就是背景色区域扩展出去，直接覆盖就好了。

不过这里并非四面扩展，outline属性并不支持方位设置。

此时，border-shape和border-image属性就是更好的选择。

二、border-shape单向扩展

核心代码：

.breakout-background {
  border-shape: inset(0 -16px -16px) circle(0);
  border-color:skyblue;
}

此时的底部布局和交互效果就会是下图GIF这般所示：

相关代码如下：

<aside>
  <main>
    内容<br>内容...
  </main>
  <footer>
    底部
  </footer>
</aside>

aside {
  padding: 16px;
  border: 1px solid #ccc;
  background: aliceblue;
  width: 300px; height: 200px;
  overflow: auto;
  overscroll-behavior: none;
  main {
    height: 300px;
  }
}
footer {
  padding-top: 10px;
  position: sticky;
  bottom: 0;
  background: skyblue;  /* 兜底，非必须 */
  border-shape: inset(0 -16px -16px) circle(0);
  border-color: skyblue;
}

释义

CSS border-shape 属性接受两个形状值，前者表示外部形状，后者表示内部形状。

inset() 函数是 CSS Shapes 图形相关的基础形状函数，用来创建内凹矩形裁剪区域。

inset(top right bottom left round radius);

其中，top right bottom left表示的是四个方向向内收缩的距离，注意，是内缩的距离，支持简写，简写规则和 margin /padding 一致。

这里，inset(0 -16px -16px)中的值是负数，因此，形状是外扩，而非内缩，扩展方向是左右和底部。

于是，可以正好覆盖外部容器设置的16px padding大小。

circle(0)表示的是内部形状，表示一个放置在中心的零半径圆。

零半径圆等于没有图形，作用是保证外部形状可以连内部也完全填充。

所以，上述代码中的background: skyblue其实是可以删除的。

关于border-shape

border-shape是个很实用的新特性，我三个月前就介绍过了，有兴趣访问这里了解：全新的CSS border-shape属性简介

我看了下，三个月过去了，目前还是仅Chrome浏览器支持。

所以，从实战角度考虑，我们必须考虑其他兼容性更好的方法，那就是border-image属性。

三、传统方法border-image

border-image扩展元素的图形区域，这个我很多年前就介绍过，包括我的著作《CSS新世界》中也有详细介绍，是CSS里面极为罕见的不影响排版情况下拓展元素的渲染区域的属性。

唯一的问题就是语法复杂了些，不过现在有AI了，大家只要知道border-image可以做这样的事情，然后让AI去处理就好了。

详见此文：被低估的border-image属性

在本例中，想要扩展元素左右和下方的背景色，可以这么设置。

footer {
  border-image: conic-gradient(skyblue) fill 0//0 16px 16px;
}

如果你想装逼，也可以使用image()函数。

image()函数也是个新特性，原本的语法支持URL图像外加剪裁，例如：

image("image1.jpg#xywh=40,0,20,20")

我实际测下来，目前仅支持背景色，Chrome和Firefox浏览器都支持，Safari不支持。

至于具体的兼容性数据，我并没有找到。

代码使用示意：

footer {
  border-image: image(skyblue) fill 0//0 16px 16px;
}

效果是一样的。

四、结语

总结一下，目前任意方向背景色扩展技术，可以在生产环境放心使用的还是border-image属性。

conic-gradient是锥形渐变，也是非常实用的渐变，可以用来绘制饼图，loading图形或者棋盘网格，详见此文：CSS conic-gradient()锥形渐变简介

不过很多开发人员对锥形渐变掌握并不熟，这里替换成线性渐变也是可以的，参考如下：

footer {
  border-image: linear-gradient(skyblue) fill 0//0 16px 16px;
}

注意，conic-gradient(skyblue)和linear-gradient(skyblue)模拟纯色背景的语法一开始不是这么精简的，如果你的项目对兼容性要求比较高，稳妥期间，还是使用完整写法conic-gradient(skyblue 0 0)和linear-gradient(skyblue, skyblue)。

好了，其他就没什么了，这应该是国庆节前的最后一篇文章了，祝大家国庆节快乐。

唉，又是一年国庆了，一年又一年，时间过得太快了。

就这样吧，我们下篇文章再见。

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12438

（本篇完）