如何防止边框导致GtkButton组件尺寸变大？

从你提供的动图可以看到，按钮在聚焦（点击）时因为新增的虚线边框导致尺寸变大，进而挤压周围按钮。以下是几种可行的解决思路：

方案一：用阴影替代边框（推荐，不改变布局） #

将聚焦状态的边框替换为box-shadow，阴影不会占用元素的布局空间，因此按钮尺寸完全保持不变：

.board-buttons {
    background: none;
    border-style: hidden;
}

.board-buttons:hover {
    background: none;
}

.board-buttons:focus {
    /* 用box-shadow实现聚焦边框效果，不影响尺寸 */
    box-shadow: 0 0 0 2px black;
    border-radius: 50%; /* 匹配circular类的圆形样式 */
}

方案二：固定按钮尺寸+盒模型调整 #

如果一定要使用边框，可以通过固定按钮的最小/最大尺寸，并让边框包含在尺寸范围内：

1. 在UI模板中添加固定尺寸属性：

<?xml version="1.0" encoding="UTF-8"?>
<interface>
    <template class="BoardButton" parent="GtkButton">
        <property name="has-frame">false</property>
        <!-- 固定按钮的最小/最大尺寸，限制扩展范围 -->
        <property name="min-width">40</property>
        <property name="min-height">40</property>
        <property name="max-width">40</property>
        <property name="max-height">40</property>
        <style>
            <class name="board-buttons"></class>
            <class name="circular"></class>
        </style>
        <child>
            <object class="GtkImage" id="image">
                <property name="resource">/com/fullaccess/ChineseCheckers/ui/assets/blue_ball.png</property>
            </object>
        </child>
    </template>
</interface>

2. 在CSS中设置盒模型：

.board-buttons {
    background: none;
    border-style: hidden;
    box-sizing: border-box; /* 让边框包含在元素的width/height内 */
}

.board-buttons:hover {
    background: none;
}

.board-buttons:focus {
    border: 2px solid black;
    border-style: dashed;
}

方案三：调整内边距抵消边框宽度 #

通过预留内边距，在聚焦时减少内边距来抵消边框增加的尺寸，适合需要自适应内容的场景：

.board-buttons {
    background: none;
    border-style: hidden;
    padding: 2px; /* 预留边框的宽度空间 */
}

.board-buttons:hover {
    background: none;
}

.board-buttons:focus {
    border: 2px solid black;
    border-style: dashed;
    padding: 0; /* 去掉内边距，抵消边框的尺寸增加 */
}

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