css - 样式 输入时间 CSS

Question

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

我把我的代码 here
我有一些问题和疑问:

• 图片中的框似乎有双色边框。外面是一种颜色 (color="#706f6f") ，里面像 shadow 。我可以用什么技术来创建这个内部边框？这是 CSS3 效果吗？
• 我觉得我的代码风格分类不好。你能帮我改进一下吗？
• 我不知道我应该把冒号 (:) 放在天、时、分和秒之间的什么位置？
• 最后一个问题是将文本放在方框下的什么地方比较好？ (天数、小时数、分钟数、秒数)将它们放在单独的 Div 容器中是否更好？

Answer 1

看到这个 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>

根据需要进一步调整它。