html - 文字周围的圆形边框

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 .