AI 摘要：文章介绍了如何利用 box-decoration-break 属性改善多行内联文本的装饰，使边界和背景效果保持连续统一。

本文详细讲解了 CSS 的 box-decoration-break 属性如何使得内联对象在分行时能够复制其边框、背景、阴影及内边距等装饰效果，从而消除默认状态下碎片化边缘的断裂感。作者首先展示了在没有该属性时，多行文本装饰出现断裂的不美观现象，再通过添加 box-decoration-break: clone 演示如何复制未断行部分的样式，使每一行呈现一致的装饰。文章通过多个示例代码，包括使用背景渐变加上 background-clip、边框图片、动画效果以及 clip-path 裁剪等技术，说明该属性不但可以作用于基本边框，还能完美处理阴影和形状装饰。同时，还介绍了各主流浏览器对该属性的支持情况，提醒开发者在使用时需考虑兼容性问题，提供了 Edge 浏览器支持投票的链接。整体来看，文中展示了如何通过 box-decoration-break 来美化网站首页或关于页面中简短段落的视觉效果。

CSS-Tricks

Decorating lines of text with box-decoration-break | CSS-Tricks

An institution’s motto, an artist’s intro, a company’s tagline, a community’s principle, a service’s greeting… all of them have one thing in common: they’re