Question

这有点难以解释。我正在为高尔夫记分卡创建显示。当显示记分卡时，对于低于标准杆1杆的值，数字周围应该有一个圆圈，因为低于2杆的值应该有一个双圈。对于较高的值，它与正方形相同。我已经用常规笔画之前的背景图像解决了这个问题，并且它工作正常。但是新的挑战是Match Play，因为我必须使用单元格背景颜色来指定哪个团队赢得了特定的洞，但同时我需要显示圆圈和正方形。我从一开始就不太喜欢背景图像解决方案，因为它不够灵活，无法容纳高于9的分数，这种情况很少见，但确实发生了，然后整个显示都会失去对齐。

我不确定这是jQuery问题还是HTML5问题或一般HTML问题。任何建议都非常赞赏。

Answer 1

您可以使用border-radius。

<span style="display: inline-block; padding: 8px; border: 1px solid black;
    border-radius: 50%;" title="Birdie">3</span>

<span style="display: inline-block; padding: 8px; border: 3px double black;
    border-radius: 50%;" title="Eagle">2</span>

对于超过标准杆的击球：

<span style="display: inline-block; padding: 8px;
    border: 1px solid black;" title="Bogey">5</span>

<span style="display: inline-block; padding: 8px;
    border: 3px double black;" title="Double Bogey">6</span>

Answer 2

您可以使用<div class="birdie"> </div>围绕数字并将div设置为带圆角的边框，如下所示：

.birdie {
        width: 20px;
        text-align: center;
        border-style: solid;
        border-width: 1px;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
    }

Eagle几乎相同，但将边框样式更改为double，将边框宽度更改为4px 此解决方案适用于所有主流浏览器。取出圆角以标记柏忌或双柏忌。

在表格单元格中围绕数字绘制圆形或方形

2 个答案: