Question

我正在尝试在我的html代码中为一个框实现圆角。当我在Chrome上运行文件时，我有框和所有属性，但角落不会圆。我在MAC OSX Lion上使用Komodo Edit。解决方案是什么？感谢

 <!doctype html>
 <html lang="en">
<head>
<meta charset=="utf-8" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
   <div id="box">
    <p id="text"> Hello </p>
   </div>
 </body>
</html>

CSS3：

body {
  text-align:center;
}

#box {
display: block;
width: 500px;
margin:50px auto ;
padding:15px ;
text-align:center;
border: 1px solid blue;
background: red;
-webkit-border-radius: 25p;
 }

#text {
   font:bold 100px Century Gothic;
}

Answer 1

那里你不需要-webkit-。只需使用border-radius。

主要问题是您错过了25px上的x。

Answer 2

问题可能是它应该是25px而不是25p。但根据您的Chrome版本，您应该删除-webkit-并使用border-radius;

Answer 3

看起来像一个错字

-webkit-border-radius: 25p;

应该是

-webkit-border-radius: 25px;

你最后错过了一个x。对于跨浏览器合规性，您应该使用多个前缀。

-moz-border-radius: 25px; /*Firefox*/
-webkit-border-radius: 25px; /*Safari/Chrome/Konqueror*/
-khtml-border-radius: 25px; /*Konqueror*/
border-radius: 25px; /*Chrome*/

webkit框圆角的难度

3 个答案: