Html 使用CSS提高文本质量

我在我的应用程序上显示了此消息。我想改进课文

下面是它现在的样子：

#footerNoInternet {
    font-size: 12px;
    background-color: #e80c0c;
    border-color: #e80c0c;
    color: white;
}

这就是我希望它的外观（从Snapchat复制）：

这就是我的CSS现在的样子：

#footerNoInternet {
    font-size: 12px;
    background-color: #e80c0c;
    border-color: #e80c0c;
    color: white;
}

其中#footerNoInternet是：

<div data-role="footer" data-position="fixed" id="footerNoInternet" hidden>
    <p>No internet connection.</p>
</div>

没有互联网连接

---

如何使用CSS实现这一点？

尝试使用文本抗锯齿；你还需要一些填充物

使用更大的字体进行更好的演示<代码>文本对齐：居中因为在图像中文本看起来是居中对齐的<代码>边距：0用于删除页边距

至于渐变，我转到渐变链接（在底部），只是做了一个快速的预设，然后将CSS粘贴到代码段中

#footerNoInternet{
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
字体大小：25px；
背景色：#e80c0c；
边框颜色：#e80c0c；
颜色：白色；
填充物：5px；
文本对齐：居中；
/*Permalink-用于编辑和共享此渐变：http://colorzilla.com/gradient-editor/#8c0237+0、ad0011+3、e80435+100*/
背景：#8c0237；/*旧浏览器*/
背景：-moz线性梯度（顶部，#8c0237 0%，#ad0011 3%，#e80435 100%）；/*FF3.6-15*/
背景：-webkit线性梯度（顶部，#8c0237 0%，#ad0011 3%，#e80435 100%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（至底部，#8c0237 0%，#ad0011 3%，#e80435 100%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#8c0237'，endColorstr='#e80435'，GradientType=0）；/*IE6-9*/
}
#footerNoInternet>p{
保证金：0；
}

没有互联网连接

我想你们需要玩渐变，把图像转换成渐变，我想你们需要玩字体

#footerNoInternet {
    text-align:center;
    font-size: 2em;
    background-color: #e80c0c;
    color: white;
    background: -webkit-linear-gradient(top, rgb(185, 57, 58) 0%, rgb(219, 71, 71) 61%, rgb(219, 71, 71) 100%);
}

---

除了CY5的答案之外，我还修改了以下内容：

我将

font size

更改为

1em

，

color

更改为

rgb（244244244）

，并添加了

font-family:sans-serif

它看起来和你要找的差不多

这是你的电话号码