2011-10-01 3 views
2

enter image description hereIMG가 그다지 보여

주위 테두리 반올림. 만약 내가 4 + px 두껍게 다음 확인을하지만 그것을 1px 얇은 필요합니다. 왜 그것이 문제입니까? ist이 속성은 다음과 같이 설계되었습니다.

HTML

<div class="win" > 
<img class="rounded" src='red.jpg' /> 
</div> 

CSS를

.win{width:188px;float:left;margin:0 30px 25px 0;} 
.win .rounded { 
overflow: hidden; 
behavior: url(PIE.htc); 
border:1px solid #000; 
-moz-border-radius: 7px; /* Firefox */ 
-webkit-border-radius: 7px; /* Safari and Chrome */ 
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 
} 

//

마침내 내가 정확히 무엇을하게 해결책을 발견 EDIT 전 필요합니다.

http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery

+0

어떤 브라우저를 사용하고 있습니까? – Kyle

+0

모든 주요 브라우저에서 작동해야합니다. – PDFedit

+0

jquery 스크립트를 제외한 링크를 공유하는 기사에서 설명한 것과 동일한 솔루션을 제안했습니다. 그렇지 않니? –

답변

-2

당신이 필요로 브라우저의 큰 숫자와 함께 작동합니다 좋은 둥근 테두리, 당신이 사업부의 배경으로 이미지를 사용할 수 있습니다 원하는 경우 : 난 다른 어쩌면 사람이 같은 문제가있는 링크를 공유 CSS 속성.
예 (전용 테두리, 아무것도) :
HTML

<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div> 

CSS

.card { 
    border:1px solid #000; 
    -webkit-border-radius: 1px; 
    -moz-border-radius: 1px; 
    border-radius: 1px; 
} 
1

당신은 background-clip CSS 속성을 살펴 있어야합니다. 시도하십시오 background-clip: padding-box. 또한 이전 브라우저를 지원하려면 -webkit-background-clip-moz-background-clip을 추가해야합니다.

0

대부분의/모든 브라우저에서 이미지에 border-radius를 사용하는 데 문제가 있습니다. 이것에 대한 온라인 기사가 많이 있지만 나는 그들에게 관심을 지불하지 않았습니다. 그것들은 Google이해야합니다.

+0

@ Sparky672 인터넷 검색을 원하는 사람들만큼 게으르지 않습니다. – Rob

관련 문제