Codenameone：如何使用 CSS 创建圆形徽章？答案

【问题标题】：Codenameone : How to create a circular badge with CSS?Codenameone：如何使用 CSS 创建圆形徽章？
【发布时间】：2020-06-20 11:44:32
【问题描述】：

所以我试图在代号中使用 CSS 创建一个圆形徽章，但到目前为止我很不走运，或者我的方法是错误的。

我想创建一个带有圆形绿色背景的价格徽章，如下所示：

我正在使用这种 CSS 样式：

MenuCardPrice{
        color: white;
        font-size: 8pt;
        background: #338833;
        border-radius: 50px;
        height : 100px;
        width :100px;
}

但我得到了这样的徽章：

我尝试更改样式的高度和宽度并尝试设置为border-radius: 50%，但这并没有太大区别。

最重要的是，如果我尝试增加它的半径，容器/标签的大小会增加，而不是像这样增加曲线：

在 Codenameone 中使用 CSS 创建圆形徽章的正确方法是什么？

【问题讨论】：

你在使用box-sizing:border-box吗？您的元素似乎实际上不是正方形的。
不，我没有使用任何特别的东西，我有确切的风格，正如我在问题中提到的那样。
然后演示问题。我的猜测是你在某处有额外的填充。
它不是纯 CSS 也没有填充，它是 Codenameone 的 CSS 端口，它缺少一些原生 CSS 实现。

标签： css codenameone

【解决方案1】：

在此处查看开发人员指南的 CSS 部分：https://www.codenameone.com/manual/css.html

RoundBorderFilled {
    background: cn1-round-border;
    color: white;
    font-size: 8mm;
    background: #338833;
    text-align:center;
    padding:3mm;
}

【讨论】：

这行得通，谢谢 Shai。将详细研究此文档