CSS 둥근 모서리

Question

나는 이것에 대한 많은 코드를 보았지만 그다지 잘 작동하지는 않는다. 둥근 모서리에 그림을 사용했지만 <table>의 경계를 따라갈 수 있도록 코드가 필요합니다. 이 문제에 대해 내가 발견 한 유일한 해결책은 테두리 주위의 셀에 이미지가있는 것입니다. 내가 할 수있는 다른 건 없니?

Answer 1

시도 :

selector { 
    -moz-border-radius: 3px; 
    -webkit-border-radius: 3px; 
    border-radius: 3px; 
} 

이 파이어 폭스, 사파리, 크롬 및 기타 CSS3 호환 브라우저에서 작동합니다. 이것을 위해 별도의 클래스를 만드는 것이 더 쉬울 수도 있습니다 - 완전한 호환성을 위해 필요한 3 개의 명령문이 있습니다.

또한 이미지를 사용하는 몇 가지 기술에 대해서는 here (cssjuice.com)을 사용해보십시오.

이 기능이 테이블에서 작동하는지 여부는 확실치 않지만 완전히 제어 할 수 있다면 레이아웃에 <table>을 사용하지 마십시오. 부디.

(참고 - 난 그냥 된 DIV 사용해야없는 경우, 자사의 벌금 테이블 형식의 데이터에 대한 테이블 태그를 사용할 생각합니다.)

는

업데이트는 :

-moz-border-radius-topleft: 3px; 
/* ... */ 
-webkit-border-top-left-radius: 3px; 

: 하나 개의 모서리에 적용

topright 또는 top-right에 대해 계속하십시오.

Answer 2

모든 브라우저를 지원하는 유일한 방법은 앵커 태그에 이미지 배경을 사용하는 것입니다. 일반적으로 컨테이너 태그의 이미지와 결합됩니다.

이 같은 HTML로 예를 들어

:

<ul> 
<li><a href="">something</a></li> 
<ul> 

나는 앵커 태그에 하나 개의 이미지를 배치 할 것이며, 리튬에 한 요소가 여전히 가변 폭 될 수 있도록이 둥근 모서리했다.

CSS3 기능과 JS 솔루션이 있지만 제대로 작동 할 수는 있지만 크로스 브라우저와 완전히 호환되지는 않습니다.

Answer 3

보십시오 CSS 3 선택기 : 사파리를 들어

.element { 
border-radius:5px 
} 

, 모질라는 CSS 3 셀렉터 (다른 하나는 않는 경우 확실하지를 지원하지만 구글 크롬 (웹킷)와 모질라 (다음 두 선택기를 사용) :

.element { 
-webkit-border-radius:5px; 
-moz-border-radius:5px; 
} 

Answer 4

당신은하지만 supported browsers 위해 CSS를 통해 반올림 할 수 있습니다.

귀하가 아닌 다른 이미지 옵션

는 스크립트 기반처럼또는 이와 유사한 스크립트.

두 가지 방법 모두주의 사항 (IE 지원, JavaScript가 비활성화 된 방문자 등)이 있습니다. 당신이 그들을 사용하도록 설정되어 있다면, 나는 그들을 지원하는 브라우저에서 CSS와 함께 일하고 단지 IE에서 그것들 없이는 받아 들여질 수 있도록하는 것에 집중할 것입니다.

Answer 5

모든 브라우저에서 작업하지 않아도되는 경우 border-radius를 사용해보십시오. 자세한 내용은 http://www.css3.info/preview/rounded-border/을 참조하십시오. 최신 Mozilla 및 Webkit 기반 브라우저는이 태그 또는 moz-border-radius 및 -webkit-border-radius를 지원합니다.

Answer 6

여기는 브라우저에 의존하지 않는 방식입니다 (잘 알려져 있지만 인기있는 브라우저에서 작동합니다). 테이블을 사용하지 않으므로 테이블을 가장 깊게 중첩시켜야합니다 div이고 길고 무겁지 만 작동합니다. 아래 코드에서 언급 된 이미지는 자신이 그린 둥근 모서리입니다. 모서리 반경은 44px입니다. 나는 둥근 모서리 CSS 위 IE6에서 작동하지 않을 것이라고 믿고있어 http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-boxes.shtml

<div class="tl"> 
    <div class="tr"> 
     <div class="bl"> 
      <div class="br"> 
       <div class="t"> 
        <div class="b"> 
         <div class="l"> 
          <div class="r"> 
           <div>Do or do not, there is no try</div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

.tl 
{ 
    font-family: Verdana, Arial; 
    font-size: 16px; 
    position: relative; 
    left: 30px; 
} 

.tl, .tr, .bl, .br 
{ 
    width: 655px; 
    height: 250px; 
} 

.t 
{ 
    width: 567px; 
    height: 250px;  
    margin: 0 0 0 44px; 
} 

.b 
{ 
    width: 567px; 
    height: 250px;  
} 

.l 
{ 
    width: 655px; 
    height: 162px;  
    margin: 44px 0 0 -44px; 
} 

.r 
{ 
    width: 655px; 
    height: 162px; 
} 

.bl 
{ 
    background: url(/images/front/rcbla.png) 0 100% no-repeat; 
} 

.br 
{ 
    background: url(/images/front/rcbra.png) 100% 100% no-repeat; 
} 

.tl 
{ 
    background: url(/images/front/rctla.png) 0 0 no-repeat; 
} 

.tr 
{ 
    background: url(/images/front/rctra.png) 100% 0 no-repeat; 
} 

.t 
{ 
    background: url(/images/front/adot.png) 0 0 repeat-x; 
} 

.b 
{ 
    background: url(/images/front/adot.png) 0 100% repeat-x; 
} 

.l 
{ 
    background: url(/images/front/adot.png) 0 0 repeat-y; 
} 

.r 
{ 
    background: url(/images/front/adot.png) 100% 0 repeat-y; 
} 

Answer 7

:

이

은의 변형이다. 당신이 명심하고 싶을 수도있는 어떤 것.

백그라운드 이미지가있는 세 개의 스택 div가 가장 쉬운 방법입니다.

<div class="top">&nbsp;</div> 
<div class="mid"> <!-- content --> </div> 
<div class="bottom">&nbsp;</div> 

div를 가진 div의 배경은 CSS를 통해 세로로 바둑판 식으로 배열됩니다. IE6에서 작동합니다.

Answer 8

나는 먼저 border-radius 옵션 사람 -b와 함께가는 경향이 있습니다.

IE를 절대적으로 지원해야하는 경우 (즉, 약간의 개선이 아닌 디자인의 기본 부분), dd_Roundies으로 성공을 거두었습니다. VML을 사용하여 작업을 완료했습니다.

Answer 9

포토샵에서 CSS 해킹이나 시간을 필요로하지 않는 간단한 해결책 www.easyimg.com을 확인하십시오.