如何使用Qt StyleSheet使焦点上的按钮周围有可见的圆圈？

Question

给定一个按钮的样式表。

top: 960px;
left: 944px;
width: 40px;
height: 40px; 
background: transparent url('img/play_circle_filled-24px-2.png') 0% 0% no-repeat;
padding-box; opacity: 1;

和围绕它的圆圈的样式表，

top: 944px;
left: 928px;
width: 72px;
height: 72px;
background: #EEEEEE 0% 0% no-repeat padding-box;
opacity: 0.2;

如何让圆圈只在焦点处可见？是否可以在一个样式表(QAbstractButton{)中实现，或者需要额外使用一些QLabel来实现这个任务？我完全不懂css，所以我来问你。

P.ST下面的样式表除了没有画圆圈而是画了正方形之外，几乎可以达到我想要的效果。

"QAbstractButton {"
"top: 960px;"
"left: 944px;"
"width: 40px;"
"height: 40px;"
"border-image: url('img/play_circle_filled-24px-2.png') 0% 0% no-repeat padding-box;"
"opacity: 1;"
"}"

"QAbstractButton:focus {"
"border-radius: 72px;"
"background-color: blue ;"
"opacity: 0.2;"
"}"

Answer 1

你可以在css中使用outline属性。

HTML.NET中，你可以使用outline属性。

<div class="img_outline">
    <button class="outline-button">Button</button>
</div>

CSS:

 .outline-button:focus{
           border:none;
           outline: 3px solid #4CAF50;
     }

你也可以在".outline__photo "类中添加 "outline-offset:20px"，如果你想在边框和图片之间留出空间的话。