Question

这可能是一个非常初学的问题，但这就是我在CSS中的表现。我有这个：

<div id="box">
        SAMPLE TEXT TO DISPLAY IN BOX!
</div>

此框的CSS位于外部工作表（正确链接到html页面）：

#box {
border-radius: 28px; 
-moz-border-radius: 28px; 
-webkit-border-radius: 28px; 
border: 5px solid #3B5998;
}

当我尝试在我的页面中使用代码时，它只是不起作用！知道为什么吗？如果问题太简单，请再次抱歉：）

编辑：我在另一个div中使用的框是中心。以下是它的用法：

<div id="center">
    <div id="box">
        Hdadjlsd
    </div>
</div>

这里是中心的CSS：

#center { 
margin-right:200px;
background-color:white; 
min-height:700px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:700px; /* for IE5.x and IE6 */
}

在此标签之外，它可以正常工作。

编辑：屏幕截图显示chrome突出显示的问题。它在检查元素 enter image description here

时显示红色框的位置

Answer 1

将此代码复制粘贴到您的html中，检查其是否正常工作。我确定如果你使用chrome :)，如果它工作，然后在你的HTML中键入css并运行它。

 <html>
  <head>
  <style type="text/css"> 
   div
 {
 border:2px solid #a1a1a1;
 padding:10px 40px; 
 background:#dddddd;
 width:300px;
 border-radius:25px;
 }
 </style>
 </head>
 <body>
 <div>The border-radius property allows you to add rounded corners to elements.</div> 
 </body>
  </html>

Answer 2

你尝试在页面中包含css ??一般趋势是在页面内部使用这样的CSS而不是外部链接。

Answer 3

您可以使用这些代码;

-moz-box-shadow: 2px 2px 7px #000000;
-webkit-box-shadow: 2px 2px 7px #000000;
 box-shadow: 2px 2px 7px #000000;
-moz-border-radius-topleft: 28px;
-moz-border-radius-topright:28px;
-moz-border-radius-bottomleft:28px;
-moz-border-radius-bottomright:28px;
-webkit-border-top-left-radius:28px;
-webkit-border-top-right-radius:28px;
-webkit-border-bottom-left-radius:28px;
-webkit-border-bottom-right-radius:28px;
border-top-left-radius:28px;
border-top-right-radius:28px;
border-bottom-left-radius:28px;
border-bottom-right-radius:28px;

您可以查看CSS代码here

Answer 4

...................... 提交给border-radius 在您的#center id div

中

就像这样

    #center { 
      border-radius:28px 28px 0 0;
-webkit-border-radius:28px 28px 0 0;
-moz-border-radius:28px 28px 0 0;
    }

的 Demo 的

CSS圆角框

4 个答案: