如何为ipywidgets中的HBox设置边框与背景填充色？

我在使用ipywidgets创建布局时，需要一个带有边框且填充指定颜色的HBox组件。边框设置较为简单，但背景填充色的控制选项未在官方文档中找到，请问是否有可行的解决方法？代码示例如下：

from ipywidgets.widgets import Label, Layout, HBox
label1 = Label('Text1')
label2 = Label('Text2')
box1 = HBox([label1, label2], layout=Layout(border='solid 2px')) # background_color='red'?
display(box1)

其实ipywidgets的Layout类虽然没把background_color做成显式参数，但我们完全可以通过CSS相关的属性来实现，这里有两种实用的解决办法：

方法1：直接在Layout中设置背景属性（推荐） #

你可能没留意到，Layout支持直接传入CSS的background或background-color属性，用法和普通CSS完全一致。修改你的代码就能快速生效：

from ipywidgets.widgets import Label, Layout, HBox, display

label1 = Label('Text1')
label2 = Label('Text2')
# 同时设置边框、背景色，还可以加padding让内容和边框更协调
box1 = HBox([label1, label2], 
            layout=Layout(border='solid 2px', 
                          background='red',
                          padding='10px')) 
display(box1)

方法2：自定义CSS类（适合批量复用样式） #

如果需要给多个HBox设置相同的样式，自定义CSS类会更高效。我们可以先注入一段CSS，再给组件添加对应的类名：

from ipywidgets.widgets import Label, Layout, HBox, display
from IPython.display import HTML

# 注入自定义样式
HTML("""
<style>
.styled-hbox {
    border: solid 2px #333;
    background-color: lightgreen;
    padding: 8px;
    border-radius: 4px; /* 还能加圆角之类的额外样式 */
}
</style>
""")

label1 = Label('Text1')
label2 = Label('Text2')
box1 = HBox([label1, label2])
box1.add_class('styled-hbox') # 给HBox添加自定义类
display(box1)

小补充： #

• background是CSS简写属性，既可以设纯色，也能设渐变、背景图；如果只想设纯色，用background-color='red'也完全没问题。
• 搭配padding属性可以调整内容和边框的间距，避免文字紧贴边框，提升视觉体验。

内容的提问来源于stack exchange，提问作者qoqosz