웹킷 경계선 반경 경계선

처음에는 둥근 모서리와 함께 검은 색 테두리가있는 이미지를 사용하려고했습니다. 그러나 Webkit에서 둥근 이미지와 둥근 테두리 둘 다 갖기보다는 직사각형 이미지와 둥근 테두리로 마무리되었습니다. 직사각형 이미지는 모서리 부분의 테두리 부분과 겹쳐 보였으므로 약간 이상한 결과가 나타납니다. 파이어 폭스와 오페라에서 나는 원하는 결과를 얻었지만 어떻게 웹킷에서 같은 효과를 얻을 수 있을지 궁금해하고있었습니다. 내가 말하는 것을보기 위해 실행할 수있는 코드가 있습니다. 도움에 미리 감사드립니다!웹킷 경계선 반경 경계선

<!doctype html> 

<html> 

<head> 
    <title> Testing Website </title> 

    <style type="text/css"> 
     img { 
      height: 500px; 
      border: 5px solid #000; 
      border-radius: 20px; 
      -moz-border-radius: 20px; 
     } 
    </style> 
</head> 

<body> 

    <img src = "http://www.public-domain-image.com/studio/slides/sunflower-on-white-background.jpg"> 

</body> 

</html>

출처

2012-09-14 RMi Flores

테두리 대신 사용 된 상자 그림자가 효과적이었습니다. –

사용 box-shadow는 : http://jsfiddle.net/UQ2kt/

출처

2012-09-14 07:55:11 doktorgradus

아주 좋은 속임수. 고마워. –

매력처럼 작동했습니다. 고맙습니다! –

@RmiFlores이 답변이 작동하면 체크 표시와 함께 수락해야합니다 – PaperThick

당신은 jQuery 플러그인을 시도 할 수 있습니다. 많은 옵션을 제공합니다. http://jquery.malsup.com/corner/

출처

2012-09-14 07:59:19 PaperThick

시도;

img{ 
    height: 500px; 
    width: 500px; 
    border: 5px solid #000; 
    border-radius: 20px; 
    -moz-border-radius: 20px; 
    display:block; 
}

출처

2012-09-14 08:03:26

웹킷 경계선 반경 경계선

답변

관련 문제