웹킷 상자 반올림 모서리의 어려움

2012-01-27 2 views 0 likes

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; 
}

출처

2012-01-27 Elmir Kouliev

답변

문제는 아마도 25p 대신 25px 여야합니다. 하지만 Chrome 버전에 따라 -webkit-을 삭제하고 border-radius를 사용해야합니다.

출처

2012-01-27 14:25:43

효과가있었습니다. 대단히 감사합니다. –

당신은 거기에 -webkit- 필요하지 않습니다. border-radius을 사용해주세요.

주된 문제는 25px의 x를 놓친 것입니다.

출처

2012-01-27 14:24:33

당신은 마지막에 X를 놓친

-webkit-border-radius: 25px;

이어야한다 오타

-webkit-border-radius: 25p;

처럼 보인다. 크로스 브라우저를 준수하려면 여러 프리픽스를 사용해야합니다.

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

출처

2012-01-27 14:34:32 Tribbey

웹킷 상자 반올림 모서리의 어려움

답변

관련 문제