DigitalOcean 为您的旅程每个阶段提供云产品。 立即开始使用 $200 免费积分！
CSS 中的 border-boundary 属性设置对元素边界的约束，影响元素边框的行为。 它在 CSS Round Display Level 1 规范中定义，该规范目前处于工作草案状态。 这意味着从现在到正式候选推荐之间可能会发生变化。
.element {
border-boundary: display; /* sets the boundary to the screen display */
}此属性存在于 CSS Round Display 规范中这一事实已经告诉了你它擅长什么：创建圆形界面。 更具体地说，border-boundary 属于“在显示边界周围绘制边框”部分，这又是它擅长的另一个线索：允许元素的边框尊重圆形界面的圆形边界。
想象一下，一块带有圆形屏幕的智能手表。 假设该屏幕是 150 像素见方。 其中有一个与它尺寸相同的橙色方框。
没什么大不了的，对吧？ 橙色方框符合圆形显示，因为它溢出了边缘，这些边缘被隐藏了。 但是看看当在方框中添加边框时会发生什么......
嗯，不太好。 同样，方框的边缘溢出了圆形显示，因此我们的边框在过程中被裁剪了。
这就是 border-boundary 在这里发挥作用的地方。 将它添加到方框中，并将其值设置为 display，允许方框的边框遵循显示的圆形。 由于该属性的浏览器支持目前为零，请允许我提供一个模拟的视觉效果，以显示预期结果。
你可以想象，这在为带有界面的手表设计时将会有多么有用。 CSS 工作组已经 编制了一份可能用例列表，其中 border-boundary 可能非常有用。
语法
border-boundary: none | parent | display;- 初始值：
none - 应用于： 所有元素
- 继承： 是
- 百分比： 不适用
- 计算值： 按指定
- 动画类型： 离散
值
none：在边框上未设置边界。parent：设置元素区域与其父元素边框边缘相交处的边界。display：设置元素区域与其视窗边框边缘相交处的边界。
浏览器支持
截至撰写本文时，还没有。
进一步阅读
- CSS Round Display Level 1 规范（工作草案）
- 圆形显示示例（CSS 工作组 Wiki）
- CSS Round Display 规范（01.org）