0

我有这个 HTML 代码：

        <p class="categoryButton glowing-border">
        <div class="facilityMaintenance" />
        <div class="lighting" />
        <div class="powerSweeping" />
        <div class="landscaping" />
  </p>

这个CSS：

.categoryButton {
position: fixed;
opacity: 0.5;
z-index: 100;
opacity: 0.5;
background-color: blue;
width: 17.5em;
height: 17.5em;
left: 50%;
}
.facilityMaintenance {
margin-left: -17.6em;
top: 6em;
border-radius: 100% 0% 0% 0%;
}

.lighting {
    border-radius: 0% 100% 0% 0%;
    top: 6em;
}

.powerSweeping {
    margin-left: -17.6em;
    border-radius: 0% 0% 0% 100%;
    top: 23.3em;
}

.landscaping {
    border-radius: 0% 0% 100% 0%;
    top: 23.3em;
}

.glowing-border {
    border: 2px solid #dadada;
}

.glowing-border:focus { 
    outline: none;
    border-color: #9ecaed;
    box-shadow: 0 0 10px #9ecaed;
}

有什么问题？另外，由于某种原因，当我在浏览器中测试它时，“top”和“margin-left”不起作用。这是为什么？谢谢你的帮助！

顺便说一句，我使用的是dreamweaver，它不渲染边界半径，而且它在我的一些页面上搞砸了很多东西。它不处理left：50；或边距：自动；好吧。这很常见吗？我只是在我的浏览器而不是 Dreamweaver 中进行测试。

4

1 回答 1

0

在您的 HTML 中， the<p>有边框，但<div>s 有边框半径。您需要让border和border-radius作用于相同的元素，即使它们设置在不同的类中。

于 2013-09-27T17:09:34.707 回答