2

私は28pxの境界線を持つ境界線画像でQPushButtonをスタイリングしています(本当に丸い角の場合)

#MyApp QPushButton
{
    margin:0;
    padding: 0;
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

ただし、ボタンがレンダリングされると、ボタンのテキスト ラベルが境界線イメージの内側のパッチにクリップされるようです。私の場合、これは悲惨なことになります：

ここに画像の説明を入力

テキストが境界線の端を含むボタンの表面全体にレンダリングされるようにするには、どうすればこれを修正できますか?

4

1 に答える 1

3

これは、最初の予想よりもシンプルで直感的であることが判明しました。

解決策は、ボタンの負のパディングを次のようにボーダー画像の半径と同じに設定することでした:

#MyApp QPushButton
{
    margin:0;
    padding: -28px; /* THIS SOLVED IT */
    border:0;
    border-image: url(:/graphics/button_brand_up.png) 28 28 28 28 stretch stretch;
    border-top: 28px transparent;
    border-bottom: 28px transparent;
    border-right: 28px transparent;
    border-left: 28px transparent;
}

ボタンが正しく表示されるようになりました。

ここに画像の説明を入力

于 2014-07-05T21:06:36.600 に答える