样式输入时间CSS

Question

我正在尝试创建一个如下图所示的框。
此框用于时间和其他两位数字

我推出了我的代码here
我有一些问题和疑问：

• 图片中的框似乎有双色边框。 outside是一种颜色（color =“＃706f6f”），里面是阴影。用什么技术我可以在边框内创建这个？这是CSS3效果吗？
• 我认为我的代码风格分类不好。请你帮我改进一下？
• 我不知道在几小时和几秒之间我应该把冒号（:)放在哪里？
• 最后一个问题是哪里更好地将文字推入框下？ （DAYS，HOURS，MINS，SECS）将它们放在单独的Div容器中会更好吗？

Answer 1

使用此img作为div的背景：

然后用浓缩字体将黑色文字放在上面。为div添加边框，就像在图像中一样，并为包装器提供匹配的背景颜色。

Answer 2

请参阅 demo fiddle 。

1. 您可以使用CSS添加插入阴影，但这就是全部。与已经给出的答案和评论一样，您可能需要考虑使用背景图像。
2. 你的语法没有问题，但它确实需要一点刷新;）
3. 您总是必须编写您的标记，就像没有样式表一样。因此，冒号位于标签和相应的数字之间。
4. 见3.

标记现在显示为：

<div id="digits">
    <p>Days<span class="colon">: </span><span class="digits">10</span></p>
    <p>Hours<span class="colon">: </span><span class="digits">00</span></p>
    <p>Mins<span class="colon">: </span><span class="digits">00</span></p>
    <p>Secs<span class="colon last">: </span><span class="digits">00</span></p>
</div>

您可以将其缩小到 this ：

<div id="digits">
    <p>Days<span>: </span><span>10</span></p>
    <p>Hours<span>: </span><span>00</span></p>
    <p>Mins<span>: </span><span>00</span></p>
    <p>Secs<span class="last">: </span><span>00</span></p>
</div>

随意调整一下。

Answer 3

我会将数字创建为图像精灵，内部阴影可以左右分割：

00
11
22
33
44
55
66
77
88
99

然后我会用透明切口构建一个png覆盖图来掩盖数字图像。