Question

如何将边缘设置为这样圆角。 Example with rounded edges.

<p>
  <span style="background-color: #9B3434;">
    <font color="white" face="Arial" >
       Dieses Feld darf nicht leer sein, geben Sie bitte die erforderliche Information ein.
    </font>
  </span>
</p>

Answer 1

使用＆＃34; border-radius＆＃34;标签风格..！

例如

border-radius: 10px;
margin-left: auto;
margin-right: auto;

Answer 2

它被称为Border Radius。它有几个变体，所以请阅读该链接。

<强> HTML：

<div class="rounded">
    Lorem Ipsum Stuff
</div>

<强> CSS：

.rounded {
    -moz-border-radius: 10px; /* For Firefox/Gecko Engine */
    -webkit-border-radius: 10px; /* For Safari + Chrome*/
    border-radius: 10px; /* For IE 9+*/
    background: #be4298;
    padding: 8px;
    width: 130px;
}

请注意，most browsers现在只需要使用border-radius，因此，除非您绝对确定没有旧浏览器会使用您的网站，否则请包含其他两个。

<强> JSFiddle Demo

Answer 3

<强> Demo

不要在90年代早期的html中使用<font>，而是用css格式化。

HTML

<p>
<span>Dieses Feld darf nicht leer sein, geben Sie bitte die erforderliche Information ein.</span>
</p>

CSS

p {
    padding: 7px;
    border: 2px dashed gray; /* to create a dashed border over the text */
    width: auto;
    display: inline;
}

span {
    background-color: #9B3434;
    color: #fff;
    padding: 5px;
    border-radius: 5px; /* this gives the rounded look */
    font-family: arial;
    font-size: 12px;
}

body {
    margin: 20px; /* for showing the example well, ignore this */ 
}

文本周围的背景颜色

3 个答案: