css - doctype html 宽度/边框半径不起作用

标签 css html

我最近尝试构建一个 HTML5 网页(使用 <!DOCTYPE html> 标签) 我制作了一个带边框半径的居中页面,带有 DOC。它是流动的,但没有它也很好。我在想,我做错了什么?如何包含文档类型并使其工作?

代码如下:

<html>
    <head>
        <style>
        body
        {
        background: #373;
        margin:0;
        }
        #container
        {
        background:transparent;
        padding:24;
        }
        #page
        {
        display: block;
        background:#eee;
        width: 850;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        margin: 0 auto;
        padding:5px;
        }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="page">
                Testing 1 2 3
            </div>
        </div>
    </body>
</html>

复制粘贴到this .

最佳答案

问题似乎是非零的 widthpadding 属性;任何非零宽度都需要指定一个单位:

The format of a length value is an optional sign character ('+' or '-', with '+' being the default) immediately followed by a number (with or without a decimal point) immediately followed by a unit identifier (a two-letter abbreviation). After a '0' number, the unit identifier is optional.

以下似乎可行,尽管我不一定知道您想要的最终结果是什么:

body
{
background: #373;
margin:0;
}
#container
{
background-color:transparent; /* amended to 'background-color' as per @Viruzzo's comment */
padding:24px; /* needed to add 'px' to this line */
}
#page
{
display: block;
background-color:#eee; /* amended to 'background-color' as per @Viruzzo's comment */
width: 850px; /* and to this one */
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
margin: 0 auto;
padding:5px;
}

JS Fiddle demo .

还有 'before' version, with your own html/css进行比较。

引用资料:

关于css - doctype html 宽度/边框半径不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8378176/

相关文章:

javascript - jQuery Accordion 展开全部

javascript - 如何摆脱织物中 Canvas 拖动时的蓝色突出显示框

html - 100% 高度的 float 元素

jquery图片到同一页面弹出

javascript - Node.js 所有 CSS 和 JS 链接在特定路径处消失

html - 使用 rotateY 后 z 索引不起作用

html - 如何在css中添加两个背景图片

javascript - 从 CSS 脚本打开 Jquery 以来的文件夹

html - 将伪元素保持在背景和主要内容之间

html - 为什么它优先