围绕文本的圆形边框

Question

如何使用css

应用图像中显示的效果

<div class="textstyle"><b>Sales Cash Invoice</b></div>

Answer 1

HTML：

<div class="textstyle">Sales Cash Invoice</div>

CSS：

.textstyle {
    background-color: gray; /* Changing background color */
    font-weight: bold; /* Making font bold */
    border-radius: 20px; /* Making border radius */
    width: auto; /* Making auto-sizable width */
    height: auto; /* Making auto-sizable height */
    padding: 5px 30px 5px 30px; /* Making space around letters */
    font-size: 18px; /* Changing font size */
}

如果您想添加字体，只需在css font-family: font_name;中添加一个新行即可。我不能这样做，因为我不知道图像上的字体是什么。

要获得更精确的颜色，请使用Color Picker。

Answer 2

.textstyle {
  background: #CDCDCD;
  border-radius: 0.25em;
}

https://developer.mozilla.org/en/docs/Web/CSS/border-radius