CSS 및 JavaScript가있는 둥근 모서리

 

    & nbsp;   콘텐츠는 여기에 됩니다   & nbsp;       테이블> 몇 년 전에 이것은 허용되는 해결책이었을 것입니다. 오늘날, 그것은 추악한 해킹입니다. 그것은 비교적 중요하지 않은 시각적 장식을위한 끔찍한 중복 마크 업입니다. 실제로 위의 코드는 엄격한 문학을 사용하여 제공되는 문서에서 의도 한대로 작동하지 않습니다. 이미지가 인라인 요소라는 사실로 인해 코너 이미지 아래에 작은 간격이 나타납니다. 따라서 'y'및 'j'와 같은 문자의 이미지의 공간 아래에 공간이 남습니다. Eric Meyer가 이미지, 테이블 및 신비한 간격으로 설명한 솔루션은 스타일 시트에 다음 규칙을 추가하는 것입니다.

이것은 여기에 표시된 것처럼 원하는 결과를 생성합니다 그러나 이제 우리는 CSS 해킹을 사용하여 못생긴 테이블 해킹을 수정하고 있습니다! CSS 만 사용하여 동일한 효과를 구현하는 방법을 살펴 보겠습니다. 일반적으로, 태그를 사용하여 페이지에 적절한 페이지에 떨어지지 않고 기존 페이지 요소의 CSS 배경 이미지로 장식 된 이미지를 구현해야합니다. 이미지가 장식 적인지 또는 실제 콘텐츠를 포함하는지 쉽게 결정할 수 있습니다. 이미지가 없는지 페이지의 전체 내용에 영향을 줄 수 있는지 스스로에게 물어보십시오. 둥근 모서리의 경우 대답은 분명히 아닙니다. CSS 배경 이미지는 놀랍도록 강력한 것입니다. CSS Zen Garden에서 전시 된 많은 멋진 디자인만이 증거를 살펴 보면됩니다. CSS를 사용하면 백그라운드 이미지를 페이지의 모든 요소에 적용 할 수 있습니다. 또한, 수평, 수직 또는 전혀 반복 될 수 있습니다. 절대 측정을 사용하여 이미지의 배경 영역 내에 위치하거나 4 개의 모서리 중 하나에 배치 될 수 있습니다. 요소의 콘텐츠가 스크롤 할 때 제자리에 고정되어 있어도 만들 수 있습니다. 불행히도 CSS 2는 하나의 작지만 중요한 제한을 부과합니다. 페이지의 각 요소에 단일 배경 이미지 만 적용 할 수 있습니다.

에 둥근 모서리를 올바르게 렌더링하려면 각 모서리에 하나씩 4 개의 배경 이미지를 적용해야합니다. 고정 너비 상자 우리가 장식 코너를 적용하는 상자의 너비가 고정 된 경우 문제의 절반이 이미 해결되었습니다. 우리가 상자가 항상 4 개의 배경 이미지 (각 모서리마다 하나씩)를 만드는 대신 항상 200 픽셀이라는 것을 알고 있다면, 우리는 2 개의 배경 이미지를 만들 수 있습니다. 이제

에 두 개의 배경 이미지를 적용하는 데 어려움이 줄어 듭니다. 이제 우리의 마크 업을 활용할 시간입니다.

둥근 모서리가있는 상자는 콘텐츠를 포함하지 않으면 그리 재미 있지 않습니다. 다음을 고려하십시오 :

꽤 단순합니까? 상자의 제목은

(

및

가 이미 페이지의 계층 구조를 더 많이 사용했다고 가정하고 다음 내용은 단락 및 비정규 목록입니다. 우리의 두 배경 문제를 해결하는 열쇠는

에 있으며, 상자 상단에 있습니다. 우리가해야 할 일은

의 상단에 배경 이미지를 적용하고 다른

의 맨 아래에 배경 이미지를 적용하는 것입니다.

결과를 ​​보려면 여기를 클릭하십시오 잘 구조화 된 문서는 일반적으로 여러 배경을 적용하고 특정 시각적 효과를 달성하기 위해 신중하게 활용할 수있는 이와 같은 후크로 가득합니다. 그것들을 식별하는 법을 배우는 것은 CSS와 함께 일하는 데 중요한 부분입니다.

중첩 된 요소

단일 DIV에 네 개의 배경을 적용하는 것은 여전히 ​​우리의 손이 닿지 않습니다. 그러나 우리가 각 배경마다 하나씩 4 개의 div를 중첩하면 어떨까요? 그렇게하면 우리의 문제가 해결되지만 구조적 가치가없는 추가 마크 업을 희생합니다.

및 CSS에서 :

td img { display: block; }

코드는 여기에 표시된대로 표시됩니다 여기서 무슨 일이 일어나고 있는지 명확해야합니다. 4 개의 DIV 각각에는 각각 둥근 모서리 배경 이미지가 할당되며, 오른쪽 상단, 상단 왼쪽, 바닥 오른쪽 및 하단 왼쪽에 위치합니다. 함유 된 DIV의 너비는 200px로 설정되지만 액체 설계와 함께 사용하기에 더 유연한 것으로 쉽게 설정할 수 있습니다. 모서리는 포함 된 div가 아무리 크든 작든 에 관계없이 여전히 작동합니다. 이제 우리는 이제 문제에 대한 해결책을 가지고 있으며,이 문제는 원래 테이블 예제보다 훨씬 적은 마크 업을 사용합니다. 그러나 여전히 완벽하지는 않습니다. 3 개의 추가 DIV를 사용하여 전체 문서 구조에 가치가 없습니다. 더 잘할 수 있습니까? JavaScript를 볼 시간입니다. dom 를 사용합니다 JavaScript와 DOM을 사용하여 브라우저에서로드 된 후 문서의 구조를 조작 할 수 있습니다. 둥근 코너는 사이트의 전반적인 경험을 크게 줄이지 않고 정책이 아닌 사용자 에이전트로부터 숨겨 질 수있는 프리젠 테이션 효과이므로 이러한 종류의 변형에 JavaScript를 사용하는 데 윤리적 인 문제가 없습니다. 최종 솔루션은 소스 문서에서 단일

만 필요합니다. 우리는 JavaScript를 사용하여 둥근 코너 효과에 필요한 3 개의 외부 div를 동적으로 추가 할 것입니다. 여기 마크 업은 다음과 같습니다 내용이 구조적으로 단락으로 더 잘 정의 된 경우

를 교환하는 것을 제외하고는 그보다 더 간단하게 만들기 위해 할 수있는 일이 많지 않다는 데 동의 할 것입니다. 이 스위치를 독자에게 연습으로 남겨 둡니다.

이제 JavaScript입니다 :

스크립트는 두 개의 논리적 섹션으로 나뉩니다. 첫 번째 섹션은 문서의 모든

요소를 반복하여 클래스 속성에 '둥근'을 포함하는 배열을 구축합니다 (요소는 여러 클래스가 공백으로 분리 될 수 있음). 스크립트의 두 번째 부분은 이러한 요소 각각을 차례로 진행하여 세 개의 추가 DIV를 만들고 원본 주위에 포장합니다. 코드를 더 자세히 살펴 보겠습니다.

여기서 우리는 원래

에서 "둥근"클래스를 완전히 제거합니다. 그 이유는 CSS에서 분명해질 것입니다. 본질적으로, 우리는 원래 스타일이 해당 요소에 더 이상 영향을 미치기 위해 적용되는 것을 원하지 않습니다.

td img { display: block; }

우리는 외부에서 가장

를 만들었습니다.이

는 상단의 전체 폭력과 상자의 전체 너비를 적용하는 데 사용됩니다. 우리는 클래스를 'Rounded2'로 설정했습니다. 이는 CSS에서 정의되며, 자바 스크립트 가능 클라이언트에 제공된 '원형'클래스와 미묘한 차이가 있습니다.

W3C DOM은 문서의 노드를 다른 노드로 바꾸는 직접적인 방법을 제공하지 않습니다. 대신, 자녀 중 하나를 다른 노드로 교체하려면 노드의 REPLACECHILD () 메소드를 사용해야합니다. 보고있는 노드를 교체하는 유용한 트릭은 ParentNode 속성을 사용하여 자체 부모에 액세스 한 다음 /#c#.replacechild를 사용하여 다른 것으로 바꾸는 것입니다. 그것이 당신에게 말이되지 않는다면, 걱정하지 마십시오. 위의 줄을 원래 노드를 방금 만든 새로운 TR 노드로 바꾸는 것으로 생각하십시오.

우리는 이제 3 개의 새로운

요소를 만들어 문서에 삽입했습니다. 남은 것은 원래 노드를 다시 삽입하는 것입니다. 내용은 다음과 같습니다.

td img { display: block; }

이 시점에서, 우리의 실제 문서 트리는 위의 4 개의 중첩 된

예에서 거의 동일합니다. 유일한 차이점은 바깥 요소가 '둥근'대신 'rounded2'클래스를 가지고 있다는 것입니다. CSS는 다음과 같습니다.

결과는 다음과 같습니다.

<div > 
<h3>Exciting features!</h3> 
<p>Your new Widget2000 will...</p> 
<ul> 
 <li>... clean your shoes</li> 
 <li>... walk your dog</li> 
 <li>... and balance your cheque book!</li> 
</ul> 
</div>

Div.rounded의 첫 번째 규칙 세트는 JavaScript를 실행하지 않는 브라우저에서만 사용됩니다. 너비는 170px이고 패딩 15px는 200px의 총 너비 (너비와 왼쪽 및 오른쪽 패딩)의 전체 너비를 더합니다. 패딩 값을 다르게 해석하는 IE 5/Windows에서 작동하려면이 작업이 필요하면 악명 높은 상자 모델 해킹을 적용해야합니다. 이전 예제에서 두 번째 규칙 세트를 이미 보았습니다.

앞서보고있는

위의 기술은 모든 최신 브라우저와 CSS2 및 DOM 2 표준을 지원하는 모든 미래 브라우저에서 작동합니다. CSS 3 은이 효과를 달성하는 여러 가지 새로운 방법을 도입하여 위의 기술을 쓸모 없게 만듭니다. CSS는 Native Rounded Corner Support (이미 Mozilla Family of Browsers에서 이미 구할 수 있음)는 강력한 :: 외부 의사 요소를 특징으로하며,이 기사에 표시된 JavaScript 예제와 유사한 방식으로 추가적인 스타일 요소를 삽입 할 수 있습니다. 충분하지 않으면 국경 이미지는 생각할 수있는 국경 장식을 거의 허용합니다. 불행히도 CSS 3 지원이 널리 사용되기까지 몇 년이 걸릴 것입니다. 그때까지 JavaScript는 슬랙을 취할 수있는 것 이상입니다.

CSS 및 JavaScript 둥근 모서리에 대한 자주 묻는 질문 (FAQ) CSS를 사용하여 둥근 모서리를 어떻게 만들 수 있습니까?

CSS로 둥근 모서리를 만드는 것은 매우 간단합니다. ‘Brower-Radius’속성을 사용하여이를 달성 할 수 있습니다. 'Border-Radius'속성은 1, 2, 3 또는 4 값을 가질 수 있습니다. 단일 값은 동일한 반경을 네 모서리 모두에 적용합니다. 두 값은 첫 번째 반경을 왼쪽 상단과 오른쪽 모서리에 적용하고 두 번째 반경은 상단 오른쪽 및 왼쪽 모서리에 적용됩니다. 세 가지 값은 첫 번째 반경을 왼쪽 상단에, 두 번째 반경은 상단 오른쪽과 왼쪽에, 세 번째는 오른쪽 하단에 적용됩니다. 4 개의 값은 각 모서리에 다른 반경을 적용합니다. 왼쪽 상단, 상단 오른쪽, 바닥 오른쪽, 왼쪽 왼쪽 순서

예를 들어, div의 모든 모서리에 10px 반경을 적용하려면 다음을 사용합니다. JavaScript로 둥근 모서리를 만들 수 있습니까?

예, JavaScript로 둥근 모서리를 만들 수 있지만이 목적으로 CSS를 사용하는 것이 더 일반적입니다. 사용자 입력 또는 기타 요인을 기반으로 둥근 모서리를 동적으로 만들어야하는 경우 JavaScript가 더 나은 선택 일 수 있습니다. 'CanvasRenderingContext2d.roundRect ()'메소드를 사용하여 캔버스에 둥근 모서리가있는 사각형을 그릴 수 있습니다. 이 방법은 5 가지 매개 변수를 사용합니다. 사각형의 왼쪽 상단 모서리의 x 및 y 좌표, 사각형의 너비 및 높이 및 모서리의 반경.

CSS로 원을 만들 수 있습니까?

CSS로 원을 만드는 방법은 원형 코너를 만드는 특수한 경우입니다. '국경-라디우스'속성을 50%로 설정하면 모서리가 원을 형성하기에 충분히 둥글게됩니다. 요소의 너비와 높이도 동일해야합니다. 예를 들어 :

div {
너비 : 100px;
높이 : 100px; 경계-라디우스 : 50%;
}
이것은 완벽한 원인 div를 생성 할 것입니다.

. '국경-라디우스'속성에 대한 다른 값을 지정하여 요소. 예를 들어, DIV의 상단 왼쪽과 윗면 모서리 만 반올림하면 다음을 사용할 것입니다 :
div { border-radius : 10px 10px 0 0;
}

이것은 왼쪽 상단과 상단 코너에 10px 반경을 적용 할 것입니다 (즉, 맨 아래 모퉁이에 맨 아래 모퉁이에 적용됩니다. 둥근 모서리가있는 테두리를 만들 수 있습니까?

둥근 모서리가있는 테두리를 만드는 것은 둥근 모서리가있는 요소를 만드는 것만 큼 쉽습니다. 당신은 단순히‘국경-라디우스’속성을 테두리와 함께 요소에 적용합니다. 예를 들어 :

div {
경계 : 1px solid black; border-radius : 10px; 이것은 1px 검은 테두리와 10px 반경을 가진 둥근 모서리를 가진 div를 생성합니다. 동일한 요소가있는 둥근 모서리를 생성 할 수 있습니까? 'Border-Radius'속성에 대해 다른 값을 지정하여 동일한 요소에 다른 반경을 가진 모서리. 예를 들어, 왼쪽 상단 모서리에 10px 반경, 상단 오른쪽 및 하단 왼쪽 모서리의 20px 반경, 하단 모서리의 30px 반경이있는 DIV를 만들려면 다음을 사용합니다. CSS?
예, 'Border-Radius'속성의 각 모서리에 두 개의 값을 지정하여 CSS로 타원형 코너를 만들 수 있습니다. 첫 번째 값은 수평 반경이고 두 번째 값은 수직 반경입니다. 예를 들면 :

div { border-radius : 10px 20px;

}

이렇게하면 수평 반경이 10px이고 20px의 수직 반경이있는 타원형 모서리가있는 div가 생성됩니다. 'Border-Radius'속성에 애니메이션을 할 수 있습니까?

예, CSS 전환 또는 애니메이션을 사용하여 'Border-Radius'속성을 애니메이션 할 수 있습니다. 예를 들어, 2 초 동안 테두리 반경을 0 ~ 50%로 점차적으로 변경하려면 다음을 사용할 수 있습니다. 당신이 그것을 가리킬 때 둥글게되면, 2 초에 걸쳐 변화가 점차 발생합니다.

'Border-Radius'속성에 백분율을 사용할 수 있습니까?

예, 'Border-Radius'속성에 백분율을 사용할 수 있습니다. 백분율은 요소의 해당 차원과 관련이 있습니다. 예를 들어, '국경-라디우스'를 50%로 설정하면 모서리가 원을 형성 할 수있을 정도로 반올림됩니다 (또는 요소의 너비와 높이가 같지 않은 경우 타원). 이것은 축소판이나 프로필 사진에 좋은 효과가 될 수 있습니다. 예를 들면
img { border-radius : 10px;
}
이렇게하면 모든 이미지의 모서리에 10px 반경이 적용됩니다.
.

위 내용은 CSS 및 JavaScript가있는 둥근 모서리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!