Question

所以我想使用多个使用webkit边框的div标签，但由于某种原因，只有名为'Wrapper'的标签会呈现。这是我的代码

.wrapper {
margin: 20px auto 20px auto;
width: 800px;
background: url('images/background_1.png');
padding: 40px;
border: 1px solid #fff;
font: 10px "Visitor", Arial, Verdana, sans-serif;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 10px #999;
-webkit-box-shadow: 0 0 10px #999;

以下是另一个标签的另一个示例：

.body {
margin: 20px auto 20px auto;
width: 800px;
background: #fff;
padding: 0px;
border: 1px solid #fff;
font: 10px "Visitor", Arial, Verdana, sans-serif;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 2px #999;
-webkit-box-shadow: 0 0 3px #999;

非常感谢

Answer 1

我不熟悉webkit，但{ padding: 0px }可能是罪魁祸首......？

Answer 2

尝试将border-radius声明放在-webkit-border-radius声明下方。（无论如何，这在兼容性方面更好）

.wrapper {
    margin: 20px auto 20px auto;
    width: 800px;
    background: url('images/background_1.png');
    padding: 40px;
    border: 1px solid #fff;
    font: 10px "Visitor", Arial, Verdana, sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 10px #999;
    box-shadow: 0 0 10px #999;
}

.body {
    margin: 20px auto 20px auto;
    width: 800px;
    background: #fff;
    padding: 0px;
    border: 1px solid #fff;
    font: 10px "Visitor", Arial, Verdana, sans-serif;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 3px #999;
    box-shadow: 0 0 2px #999;
}

Answer 3

这对我有用：

    <style type="text/css">
    .wrapper {
    margin: 20px auto 20px auto;
    width: 800px;
    background: url('images/background_1.png');
    padding: 40px;
    border: 1px solid #fff;
    font: 10px "Visitor", Arial, Verdana, sans-serif;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    box-shadow: 0 0 10px #999;
    -webkit-box-shadow: 0 0 10px #999;
    }

    .body {
    margin: 20px auto 20px auto;
    width: 800px;
    background: #fff;
    padding: 20px;
    border: 1px solid #fff;
    font: 10px "Visitor", Arial, Verdana, sans-serif;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 20px;
    box-shadow: 0 0 2px #999;
    -webkit-box-shadow: 0 0 3px #999;}
    </style>
    </head>

    <body>
    <div class="wrapper"></div>

    <span class="body">afasfdasdf</span>

Div标签无法正确呈现

3 个答案: