CSS : Div에 Div 추가하기 (둥근 모서리 토론)

Question

현재 텍스트 요소에 둥근 모서리를 만들기 위해 CSS와 Div 태그의 조합을 사용하고 있습니다. 이것은 내가 사용 CSS입니다 :

div#installerSearch { 
    float: left; 
    position: relative; 
    color: #000055; 
    width: 154px; 
    border: 1px solid #2A5390; 
    padding: 8px; 
    background-image: url('images/background.png'); 
} 

div.roundAllGreen { 
    position: absolute; 
    width: 8px; 
    height: 8px; 
    background-image: url('images/roundgreenthingy.png'); 
} 

div.roundTopLeft { 
    left: -1px; 
    top: -1px; 
    background-position: 0px 0px;  
} 

div.roundTopRight { 
    right: -1px; 
    top: -1px; 
    background-position: -7px 0px;  
} 

div.roundBottomLeft { 
    left: -1px; 
    bottom: -1px; 
    background-position: 0px -7px;  
} 

div.roundBottomRight { 
    right: -1px; 
    bottom: -1px; 
    background-position: -7px -7px;  
} 

이는 결과 HTML입니다 :

<div id="installerSearch"> 
    <div class="roundAll roundTopLeft"></div> 
    <div class="roundAll roundTopRight"></div> 
    <div class="roundAll roundBottomLeft"></div> 
    <div class="roundAll roundBottomRight"></div> 
    <p> ... </p> 
</div> 

수 다른 사람 자리 문제? 나는 마크 업의 형태로 프리젠 테이션을 포함하는 데 더 나은 방법이 부족하여 의지했다. 다시 시도하기가 어렵다.

내가 정말로 원하는 것은 CSS 컨테이너 태그 안에 div 태그를 추가하는 것입니다. 나는 이것이 코드 레벨에서 "CSS의 내용 없음"규칙을 어기는 것을 깨닫는다. 그러나 내 둥근 모서리가 내용으로는 거의 적합하지 않아서 내 책에서 그것을 깨뜨리지 않는다고 생각한다.

그래서 내가 묻는 것은 CSS를 사용하여 내 콘텐츠에 추가 태그를 삽입하지 않고도 동일한 효과 (이미지를 사용하여 둥근 모서리)를 수행 할 수있는 좋은 방법일까요? 여기에있는 아이디어는 템플릿 HTML 페이지를 수정하지 않고도 완전히 바꿀 수있는 CSS 시트로 끝나는 것입니다. 그러나 가능하지 않다면 그 대답으로 받아 들일 것입니다. 그것은 단지 구글이 이번에는 나에게 완전히 실패한 것 같다.^_^

Answer 1

짧은 대답 : 이것을 수행하는 방법은 not currently a well-supported CSS-only입니다.

CSS3 지원을 기다릴 수 없다면 JavaScript 대안을 찾아보십시오. Nifty Corners Cube은 둥근 모서리를 추가하고 앤티 앨리어스라고 주장합니다. jQuery corner plugins도 많이 있으며, this one은 다양한 코너 효과를냅니다.

모서리에 이미지를 사용하려는 특별한 이유가 있습니까? 필요한 모든 것이 둥근면 위에서 언급 한 JavaScript 솔루션을 사용하여 얻을 수 있습니다. Nifty Corners Cube 예제를 살펴 보는 것이 좋습니다.

편집 : 당신이 여분의 마크 업 검색 엔진 효율을 해치지 염려되는 경우 (A CSS 전용 솔루션 내 생각에 최선을 다 할 것입니다 있지만)는 다음 자바 스크립트 솔루션은 더 나을 여분의 마크 업 것이기 때문에 클라이언트 쪽을 추가했습니다. 몇 가지 검색 엔진을 사용하여 작업했으며 콘텐츠를 인덱싱하기 전에 의도적으로 스크립트 태그를 제거합니다. 아주 좋은 작동

Answer 2

해당 div를 추가 할 자바 스크립트를 작성할 수 있습니다. 하지만 그것은 CSS에서 큰 문제입니다. 다른 사람들이 말할 수도있는 내용에 관계없이 콘텐츠에 의존합니다.

Answer 3

또 다른 jQuery 플러그인 : Anti-aliased Rounded corners with JQuery

Answer 4

수 다른 사람 자리 문제?

roundAll과 roundAllGreen 간의 className의 차이점은 무엇입니까?

마크 업의 형태로 프레젠테이션을 포함하는 데있어 (더 나은 방법이 부족하여) 재 작업하기가 다소 어려워졌습니다.

(a) IE가 경계 반경을 지원하거나 (b) 단일 요소의 다중 배경 이미지가 가능해질 때까지는 마크 업과 어떤 종류의 간섭이 불가피합니다. 당신이 떨어져 두 개의 중첩 된 div의 상단 가장자리 하나에 얻을 수 있도록, 상자의 폭이 고정되어 현재 페이지에서

<div class="box"><div><div><div> 
    Hello 
</div></div></div></div> 

.box { background: url(topleft.png) top left no-repeat; } 
.box div { background: url(topright.png) top right no-repeat; } 
.box div div { background: url(bottomleft.png) bottom left no-repeat; } 
.box div div div { background: url(bottomright.png) bottom right no-repeat; } 

:

다소 덜 간섭 또 다른 가능성은 배경 중첩입니다 하나는 바닥에. bobinces의 솔루션에

Answer 5

하나 개의 모드 :

<div class="box"><div><div><div> 
    Hello 
</div></div></div></div> 

.box { background: url(topleft.png) top left no-repeat; } 
.box>div { background: url(topright.png) top right no-repeat; } 
.box>div>div { background: url(bottomleft.png) bottom left no-repeat; } 
.box>div>div>div { background: url(bottomright.png) bottom right no-repeat; } 

Answer 6

나는 당신이이 이미지를 사용에있어 가정? 이미지에 반대하지 않으려면 http://www.easyimg.com을 시도하십시오. 꽤 멋진 솔루션, 포토샵 작업이 전혀 필요 없습니다. img src 태그에서 직접 이미지를 디자인하십시오.