둥근 모서리를 만드는 HTML 방법. Border-radius: CSS의 둥근 모서리입니다. 작은 서정적 일탈

모두가 오랫동안 웹사이트 디자인의 전통적인 직사각형 모서리에 지쳤습니다. 이미지를 사용하지 않고 테두리 반경 속성을 사용하는 스타일을 통해 둥근 모서리가 유행합니다. 이 속성은 모든 모서리 또는 각각의 반경을 개별적으로 결정하는 공백으로 구분된 1개, 2개, 3개 또는 4개의 값을 가질 수 있습니다.

테이블에 도 1은 이 경우에 얻어지는 다양한 수의 값과 블록 유형을 보여줍니다.

암호	설명	보다
div(경계 반경: 10px; )	모든 모서리에 대한 반경을 한 번에 라운딩합니다.
div(경계 반경: 0 10px; )	첫 번째 값은 왼쪽 상단과 오른쪽 하단 모서리의 반경을 설정하고, 두 번째 값은 오른쪽 상단과 왼쪽 하단의 반경을 설정합니다.
div(경계 반경: 20px 10px 0; )	첫 번째 값은 왼쪽 상단 모서리의 반경을 설정하고, 두 번째 값은 오른쪽 상단과 왼쪽 하단 모두, 세 번째 값은 오른쪽 하단을 설정합니다.
div(경계 반경: 20px 10px 5px 0; )	왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리의 반경을 순차적으로 설정합니다.

예제 1은 모서리가 둥근 블록을 생성하는 방법을 보여줍니다.

예시 1. 블록의 모서리

HTML5 CSS3 IE 9+ Cr Op Sa Fx

이 예의 결과는 그림 1에 나와 있습니다. 1.

쌀. 1. 모서리가 둥근 블록

반올림 반경을 요소 높이와 너비의 절반보다 크게 설정하면 흥미로운 효과를 얻을 수 있습니다. 이 경우 원이 생깁니다. 예제 2에서는 그림이 포함된 둥근 버튼을 만드는 방법을 보여줍니다.

예 2: 원형 버튼

HTML5 CSS3 IE 9+ Cr Op Sa Fx

이 예의 결과는 그림 1에 나와 있습니다. 2.

쌀. 2. 둥근 버튼

Opera 브라우저에서 다음으로 반올림합니다. 테두리 속성을 통해 테두리를 지정하지 않으면 잘못 적용됩니다.

border-radius 속성은 요소에 그림자를 추가하는 등의 다른 속성과 결합될 수 있습니다. 예제 3에서는 원 세트가 만들어지며 그 중 하나가 box-shadow 를 사용하여 강조 표시됩니다. 이 세트는 페이지나 사진을 탐색하는 데 사용할 수 있습니다.

실시예 3. 글로우

HTML5 CSS3 IE 9+ Cr Op Sa Fx

이 예의 결과는 그림 1에 나와 있습니다. 삼.

쌀. 3. 원 주위에 빛나기

border-radius를 사용하면 원뿐만 아니라 타원, 블록의 타원형 반올림도 만들 수 있습니다. 이렇게 하려면 하나의 값이 아닌 두 개의 값을 슬래시로 구분하여 작성해야 합니다. 20px/10px이라고 쓰면 필렛의 가로 반경이 20픽셀, 세로 반경이 10픽셀이 됩니다. 예제 4에서는 타원형 모서리를 만들어 만화책 스타일 캡션을 사진에 추가하는 방법을 보여줍니다.

예제 4: 타원

HTML5 CSS3 IE 9+ Cr Op Sa Fx

당신은 당신 자신의 선생님입니다

이 예의 결과는 그림 1에 나와 있습니다. 4.

쌀. 4. 타원형 모서리 사용

예 5와 같이 img 선택기에 border-radius 속성을 추가하여 이미지의 모서리 모양을 변경할 수도 있습니다.

예시 5: 이미지

HTML5 CSS3 IE 9+ Cr Op Sa Fx

CSS의 둥근 모서리매우 다양한 방법으로 수행할 수 있으며 CSS 3에서는 HTML 요소의 모서리를 둥글게 만들 수 있는 새로운 속성을 도입했기 때문에 그 중 일부는 오래된 것으로 간주될 수 있습니다. 그러나 첫째, 오래된 브라우저는 이러한 속성을 지원하지 않으며, 둘째, 이러한 아이디어는 때때로 오래된 방법만이 저장할 수 있는 디자이너의 창의적인 두뇌에서 탄생합니다. 따라서 여기서는 가장 단순한 것부터 매우 복잡한 것까지 CSS에서 둥근 모서리를 만드는 여러 가지 옵션을 살펴보겠습니다.

이러한 예에서는 초기 블록 요소의 모서리가 둥글게 처리되어 있으며 일부 예에서는 이러한 블록이 보조 요소로 사용됩니다. 그러나 필요한 경우 라인 수준 요소에 대해 블록이나 인라인 블록을 사용하여 미리 설정하여 쉽게 동일한 작업을 수행할 수 있다는 점을 기억하십시오.

이미지가 없는 CSS 3의 둥근 모서리

이 예에서는 이미지의 도움 없이 모서리를 쉽게 둥글게 만들 수 있는 CSS 3의 속성을 사용합니다.

HTML 및 CSS 예: 이미지 없이 CSS 3을 사용하여 모서리 둥글게 만들기

콘텐츠를 차단합니다.

예제 설명

1. 모서리를 둥글게 하기 위해 우리는 모든 최신 브라우저에서 이해할 수 있는 CSS 3 속성을 사용합니다.
2. 이전 브라우저인 Firefox, Chrome 및 Safari의 경우 기본 속성이 지원되기 전에 나타난 접두사 -moz- 및 -webkit-이 있는 특수 속성을 사용합니다. 불행히도 기존 Opera 및 IE와 유사한 유사 항목은 없습니다. 복잡한 곡선을 생성할 때 접두사가 있는 속성이 올바르게 작동하지 않을 수 있습니다. 그렇기 때문에 CSS 코드에서 기본 속성보다 높게 나열되었습니다. 스타일 우선순위, 이미 "순수"를 이해하는 브라우저가 이를 사용했습니다.

접두사가 있는 속성은 CSS 사양에 포함되어 있지 않으므로 이를 사용하면 잘못된 코드가 발생합니다.

이미지가 없는 CSS의 둥근 모서리

이 예에도 이미지가 없지만 추가 블록을 사용합니다. 이 방법의 본질은 주요 콘텐츠 전후에 여러 블록이 표시되며, 블록이 멀어짐에 따라 측면 외부 여백을 사용하여 너비가 점차 감소한다는 것입니다. 덕분에 둥근 모서리 모방이 발생합니다.

이 방법은 코드가 추가 블록으로 "흩어져" 있기 때문에 좋지 않지만, 불행하게도 많은 예에서 이러한 블록이 존재합니다. 또 다른 단점은 곡률 반경이 크면 예제에 사용된 것보다 더 많은 블록을 추가해야 한다는 것입니다.

HTML 및 CSS 예: 이미지를 사용하지 않고 모서리 둥글리기

콘텐츠를 차단합니다.

예제 설명

1. 클래스 = "block"인 블록 내부에는 모서리 둥글림을 시뮬레이션하기 위해 블록("b1", "b2", "b3")을 앞에 배치하는 기본 콘텐츠("content_block")에 대한 요소를 나타냅니다. 그 후에는 동일하게 배치하지만 순서는 반대입니다.
2. 모퉁이 모양을 만들기 위해 시뮬레이션 블록을 필요한 높이와 측면 여백(CSS)으로 설정했습니다. 또한 글꼴 크기(CSS)를 재설정하고 :hidden으로 설정했습니다. 이는 높이를 늘리고 지정된 것보다 더 크게 만들 수 있는 이전 브라우저를 위한 것입니다.
3. 이 예에서는 모서리를 둥글게 만드는 것 외에도 프레임 모방도 추가했습니다. 필요하지 않은 경우 요소에서 모든 "테두리"를 제거하고 "b3"에서 배경색을 제거하면 됩니다. 차단하다.

CSS에서 둥근 모서리를 표시하는 가장 쉬운 방법은 이미지를 요소의 배경으로 사용하는 것입니다. 이 경우 요소의 크기는 일반적으로 배경 이미지의 크기와 동일하게 지정됩니다. 이 방법의 단점은 요소의 내용이 해당 범위를 벗어나서는 안 된다는 것입니다. 즉, 특정 크기가 제한되어야 합니다.

HTML 및 CSS 예: 하나의 이미지를 사용하여 모서리 둥글게 만들기

메뉴

예제 설명

1. CSS 속성을 사용하여 블록의 배경 이미지를 설정합니다. 이 경우에는 필요하지 않기 때문에 수직 및 수평 복제(반복 없음)가 금지됩니다.
2. 블록 내부의 텍스트가 가장자리에 닿는 것을 방지하기 위해 각 측면의 패딩(CSS)을 5px로 설정했습니다.
3. 다음으로 블록을 배경과 동일한 크기로 설정해야 합니다. 배경 이미지의 크기는 140x32픽셀이지만 블록 자체의 너비(CSS)와 높이(CSS)를 10픽셀 축소하여 지정합니다. 각 방향으로 요소를 5px씩 확장하는 동일한 내부 패딩 때문에 이를 줄여야 했습니다.

앞선 예에서는 블록 크기가 고정되어 배경 이미지의 크기에 따라 달라지는데, 이는 매우 불편합니다. 이제 블록의 너비를 크기 조정 가능하게 만들겠습니다. 이렇게하려면 이미지의 세 부분, 즉 측면과 중앙 부분을 잘라냅니다. 그런 다음 절대 위치 지정 덕분에 메인 블록 내부에 고정된 크기의 두 요소를 배치할 것입니다. 배경과 동일한 측면 부분과 메인 블록의 중앙 부분을 제공하겠습니다. 그러면 모서리가 둥글고 너비가 가변적인 블록이 생성됩니다.

이 기술은 링크나 섹션/메뉴 제목과 같은 한 줄 요소를 마무리하는 데 매우 자주 사용됩니다.

HTML 및 CSS 예: SideBlock을 사용하여 모서리 둥글게 만들기

메인 콘텐츠.

예제 설명

1. 블록 클래스 = "block" 내부에는 "left_bok"과 "right_bok"이라는 두 가지 요소를 배치합니다. 여기에 측면 부분의 이미지를 배경(CSS)으로 설정하고 재생을 금지합니다(반복 없음). 메인 블록 자체의 경우 중앙 부분부터 배경을 설정하고 가로로만 복제할 수 있도록 합니다(repeat-x).
2. 배경 크기에 해당하는 측면 블록의 너비를 지정합니다. 이는 14x32픽셀입니다. 하지만 메인 블록의 경우 이전 예제와 같이 수직 패딩을 보상하기 위해 높이를 22px로 설정했습니다.
3. 우리는 "블록"을 기준으로 측벽을 배치할 것이므로 이에 대해서는 :relative를 지정하고 측벽 자체에는 절대값을 지정합니다. 그런 다음 CSS 속성 및 을 사용하여 부모의 해당 측면에 누릅니다.
4. 블록의 내용이 측면 이미지 아래에 숨겨지는 것을 방지하기 위해 '블록'에 측면 패딩(CSS)이 있도록 설정했습니다. 이 패딩은 측면 자체와 같거나 약간 더 클 수 있습니다. 또한 텍스트가 가장자리에 "붙지" 않도록 위쪽과 아래쪽에 작은 여백을 설정했습니다.

IE6에는 이 방법에 작은 버그가 있습니다.

"블록"의 너비나 높이가 홀수인 경우 블록의 안쪽 가장자리와 오른쪽에 위치한 사이드바 사이에 불쾌한 1px 들여쓰기가 나타나 전체 그림을 망칠 수 있습니다. 이 버그는 다음을 사용하여 수정할 수 있습니다. CSS 해킹특정 표현을 사용하지만 브라우저가 자주 정지되고 사용하지 않는 것이 낫기 때문에 여기서는 그러한 예를 제시하지 않습니다.

다르게 해봅시다. "right_bok" 왼쪽 여백(CSS)을 100%로 설정하여 메인 블록의 오른쪽 테두리를 넘어 이동한 다음 다시 반환하여 너비와 같은 픽셀 수만큼 왼쪽으로 이동합니다. IE6은 이러한 속성 값으로 올바르게 작동하므로 필요한 곳에 블록을 배치할 수밖에 없습니다.

이 모서리를 둥글게 만드는 방법은 이전 방법과 유사하지만, 여기서는 HTML 요소가 측면에 배치되는 것이 아니라 메인 블록에 추가되는 요소입니다. 유사 요소. 이러한 접근 방식 덕분에 페이지의 불필요한 HTML 코드를 제거할 수 있었습니다.

HTML 및 CSS 예: 측면 의사 요소를 사용하여 모서리 둥글리기

메인 콘텐츠.

예제 설명

1. CSS 의사 요소를 사용하여 메인 블록의 시작과 끝에 무언가를 추가하고 싶다는 것을 나타냅니다. 그리고 CSS 속성을 사용하여 둥근 모서리 또는 측면의 필요한 이미지를 추가하기만 하면 됩니다. 그래서 우리는 이미지를 사용하여 두 개의 의사 요소를 만들었습니다.
2. 그러면 이전 예제와 똑같은 작업을 수행합니다. 생성된 의사 요소만 사용하면 됩니다.

IE6 및 IE7의 경우 이 예에서는 다음 "목발"이 사용되었습니다.

1. 아시다시피 IE6과 IE7은 여기에 사용된 의사 요소를 이해하지 못하므로 다음을 수행합니다. 기본 요소 내부에 두 개의 태그를 통합하는 표현식을 사용하고 이전 예제와 동일한 스타일을 제공합니다. 첫 번째 innerHTML 뒤에 삽입된 코드는 여는 "block" 태그 바로 뒤에 추가되고, 두 번째 innerHTML 뒤에는 닫는 태그 앞에 추가됩니다. 예, 우리의 경우에는 절대 위치 지정이 사용되므로 중요하지 않지만 때로는 이에 대해 알아 두는 것이 유용합니다.
2. 이 코드를 다른 브라우저에서 볼 수 없도록 하기 위해 조건부 주석. 별도의 CSS 파일에 넣어서 동일한 주석으로 닫혀진 태그로 연결해 주시면 더 좋을 것 같습니다.

블록 래핑을 사용한 CSS의 둥근 모서리

이 방법의 핵심은 먼저 이미지의 모서리를 잘라내는 것입니다. 그런 다음 (모서리 수에 따라) 여러 블록이 메인 블록 내부에 배치되고 서로 중첩됩니다. 각각에는 하나의 이미지 코너가 배경으로 제공됩니다. 이미지의 재생을 금지하고, 블록의 모서리 부분에 위치하도록 좌표를 부여합니다. 이것이 둥근 모서리 효과를 얻는 방법입니다.

HTML 및 CSS 예: 블록 둘러싸기를 사용한 모서리 둥글게 만들기

콘텐츠를 차단합니다.

예제 설명

1. 메인 블록 안에 4개를 더 배치합니다. 이 블록에는 여백이나 테두리가 없고 가장 안쪽에만 들여쓰기가 있으므로 높이와 너비가 모두 동일합니다.
2. CSS 속성을 사용하여 각 내부 블록을 모서리에 배경으로 설정하고 재생을 금지하고 블록 모서리에 배치합니다. 그리고 요소의 배경색이 투명하기 때문에 네 개의 배경 모서리가 모두 페이지에 표시됩니다.
3. 모서리가 있는 바깥쪽 블록에 원하는 배경색을 추가합니다. 모든 것이 준비되었습니다.

class="block" 에 원하는 속성을 지정하여 블록의 너비를 명시적으로 설정할 수 있지만, 높이를 변경하려면 가장 안쪽 요소(우리의 경우 "rb")를 사용해야 합니다.

위치 지정을 사용하여 CSS의 둥근 모서리

여기에서도 배경의 모서리가 잘려져 작은 블록에 표시됩니다. CSS 절대 위치 지정을 사용하여 이러한 블록은 원하는 배경색이 지정된 기본 요소의 모서리에 배치됩니다.

HTML 및 CSS 예: 위치 지정을 사용한 모서리 둥글게 만들기

콘텐츠를 차단합니다.

예제 설명

1. 기본 요소(class= "block") 내부에 "corn_lt" , "corn_rt" , "corn_lb" , "corn_rb" 클래스가 포함된 4개의 태그를 배치합니다. 이는 코너 블록 역할을 합니다.
2. CSS 속성을 사용하여 자체 배경 이미지를 각 모서리 블록에 연결하고 너비와 높이를 이러한 배경 이미지와 동일한 크기로 설정합니다. 만약을 대비해 글꼴 크기(CSS)를 재설정하고 초과된 부분(CSS)을 잘라냅니다.
3. 우리는 기본 요소(CSS:relative)에 대한 상대 위치를 지정합니다. 왜냐하면 우리는 코너 블록을 기준으로 위치를 지정하고 코너 자체에 대해서는 절대(절대)를 지정하기 때문입니다.
4. CSS 속성 및 을 사용하여 모퉁이 블록이 주 블록의 모퉁이에 위치하도록 수직 및 수평 오프셋 거리를 지정합니다.

IE6에는 이 방법에 몇 가지 문제가 있습니다.

1. "블록"의 너비가 명시적으로 지정되지 않으면 왼쪽 모서리가 제자리에 맞지 않습니다. 그 이유는 블록에 내부 패딩이 있기 때문입니다. 문제를 해결하는 가장 쉬운 방법은 들여쓰기를 제거하고 추가 블록 래퍼에 "블록"(모서리 없음)의 주요 내용을 묶은 다음 래퍼에 필요한 들여쓰기를 지정하는 것입니다. 하지만 여기서는 IE6에 요소를 원래 크기로 표시하도록 지시하는 Zoom:1 속성을 사용하여 레이아웃을 활성화하여 다르게 수행했습니다. 이 속성은 유효하지 않으므로 사용하기로 결정한 경우 다음을 통해 연결하는 것이 좋습니다. 조건부 주석.
2. 위에서 논의한 것과 동일한 1픽셀 버그입니다. 그러나 여기서는 블록의 오른쪽 모서리와 오른쪽 사이뿐만 아니라 아래쪽에도 틈이 생길 수 있습니다. 그리고 오른쪽의 공백을 제거하면 아래쪽 공백에서는 작동하지 않습니다. 해결책은 기본 요소의 너비와 높이를 명시적으로 지정하는 것입니다. 홀수 값을 설정할 수도 있지만 아래쪽 및 오른쪽 오프셋 거리를 0이 아닌 -1px로 설정해야 합니다.

기본적으로 CSS에서 모서리를 둥글게 하는 방법에 대한 기술은 이전 기술과 동일하므로 여기서는 자세한 설명을 생략합니다. 유일한 차이점은 별도의 배경 모서리 이미지 대신 여기에 하나의 공통 스프라이트 이미지가 사용된다는 것입니다. 덕분에 하나의 이미지가 4개보다 "무게"가 낮고 호스팅 4개가 아닌 1개의 항소가 있습니다.

스프라이트는 웹 사이트 요소의 배경으로 사용되는 여러 이미지를 결합한 이미지입니다. 스프라이트의 어느 부분이 특정 HTML 요소의 배경이 될지는 특수 CSS 속성에 지정된 좌표에 따라 다릅니다.

HTML 및 CSS 예: 위치 지정 및 스프라이트를 사용하여 모서리 둥글게 만들기

콘텐츠를 차단합니다.

예제 설명

1. CSS 속성을 사용하여 배경 스프라이트 이미지를 22x22 픽셀(각 1/4 모서리에 대해 11x11 픽셀) 크기의 둥근 모양을 가진 모서리 블록에 연결합니다.
2. CSS 속성을 사용하여 배경 오프셋 좌표를 지정합니다. 예를 들어 -11px 0 값은 배경이 X축에서 왼쪽으로 11px만큼 오프셋되지만 Y축에서는 오프셋되지 않음을 의미합니다. 따라서 스프라이트의 왼쪽 절반은 요소의 경계를 벗어나고 오른쪽만 남습니다. 하지만 높이가 22px이고 모퉁이 블록 자체의 높이가 11px이므로 절반만 보입니다. 따라서 이 값을 사용하면 요소의 배경이 스프라이트의 오른쪽 상단이 됩니다.

IE6에는 이전 예와 동일한 문제가 있습니다.

이 예에서는 테두리가 있는 요소의 모서리를 둥글게 만들지만 이는 이 특정 방법의 특정 기능은 아닙니다. 이전 예에서는 테두리가 있는 둥글게 만들기를 쉽게 사용할 수 있습니다.

메인 블록에서 생성된 의사 요소를 사용하여 자체적으로 반올림을 수행하지만 위치 지정은 적용하지 않습니다.

그리고 잠시만요. 이전 예에서는 모서리가 내부 배경과 함께 잘려졌지만 항상 필요한 것은 아닙니다. 특히 둥근 모서리가 있는 블록의 배경이 균일하지 않을 것으로 예상되는 경우에는 더욱 그렇습니다. 따라서 프레임 안의 배경을 투명하게 만들었고(PNG 형식에서는 가능) 모서리를 잘라내면 안쪽도 투명해졌습니다. 필요한 경우 이전 예에서 유사한 접근 방식을 사용할 수도 있습니다.

HTML 및 CSS 예: 의사 요소를 사용하여 모서리 둥글리기

콘텐츠를 차단합니다.

배경, 그리고 그것의 도움으로 우리는 그것들을 오른쪽에 배치하고 "복제"를 금지합니다. 이제 모서리가 준비되었습니다.

"블록"(CSS)에 패딩을 지정했기 때문에 의사 요소와 모서리는 블록의 모서리에 위치하지 않고 가장자리에서 15px 떨어져 있습니다. 이 문제를 해결하기 위해 필요한 측면에 의사 요소 음수 여백(CSS)을 제공하여 들여쓰기 위에 배치합니다. 하지만 여백을 15가 아닌 17픽셀로 설정합니다. 이는 너비가 2픽셀(15+2=17)인 프레임(CSS)을 덮는 데 필요합니다. 이제 그게 다입니다.

IE6 및 IE7의 경우 여기에 HTML 코드를 삽입할 때 이미 익숙한 "목발"을 사용했습니다. 왜냐하면 이러한 브라우저는 여기에 사용된 의사 요소를 이해하지 못하기 때문입니다.

1. 표현식을 사용하여 기본 요소 내부에 두 개의 태그를 통합하고 이 태그도 블록으로 변환합니다. 그런 다음 여기에 하나의 태그를 배치합니다. 그리고 이러한 태그는 의사 요소와 동일한 속성을 갖습니다. 유일한 것은 프레임이 모서리와 겹치지 않는 CSS 속성 :relative를 추가로 추가한다는 것입니다.

이 방법의 단점은 둥근 모서리가 있는 블록의 높이를 명시적으로 설정할 수 없다는 것입니다. 왜냐하면 내용의 크기를 초과하면 아래쪽 모서리가 모서리에 밀착되지 않기 때문입니다. 주요 콘텐츠를 다른 블록에 포함하고 높이를 설정하면 이러한 문제를 피할 수 있습니다.

의사 요소가 있고 추가 블록이 없는 둥근 모서리의 또 다른 예

이 예는 이전 예와 유사하지만 여기서는 위치 지정을 사용하여 의사 요소를 정렬합니다. 이 접근 방식 덕분에 모서리가 둥근 블록의 높이를 명시적으로 지정할 수 있게 되었습니다.

HTML 및 CSS 예: 블록 높이를 변경할 수 있는 둥근 모서리

콘텐츠를 차단합니다.

그리고 다시 IE6 및 IE7의 경우 표현식을 사용하여 메인 블록 내부에 몇 가지 추가 요소를 추가하고 조건부 주석으로 코드를 닫습니다. 이번에는 의사 요소를 에뮬레이트하려고 시도하지 않고 더 간단하게 수행하겠습니다.

1. “block” 안에 4개의 태그를 추가하고 위치 지정을 적용합니다. 그런 다음 이미지 모서리를 배경으로 표시하고 기본 요소의 모서리에 배치합니다. 즉, 위에서 설명한 방법 중 하나와 정확히 동일한 작업을 수행합니다.
2. 위에서 여러 번 언급한 1픽셀 버그를 제거하려면 오른쪽 모서리 요소에 100% 값과 -9px에 해당하는 음수 오프셋을 사용하여 왼쪽 여백(CSS)을 추가하세요. 일반적으로 기억한다면 이 오프셋은 모퉁이 블록의 너비(우리의 경우 11px)와 같아야 하지만 여기에 있는 2px 테두리를 잊지 마세요. 모퉁이를 그 위에 놓아야 합니다. (11px-2px=9px).

그런데 실제로 이전 예제에서 했던 것처럼 의사 요소를 에뮬레이트하는 것이 더 쉬울 것입니다. 이렇게 하면 추가 코드가 줄어듭니다. 그러나 IE6에서는 그렇지 않습니다. 이 브라우저에는 몇 가지 "목발"이 더 필요하며 결과적으로 두 개의 별도의 코드를 작성해야 합니다. 조건부 주석- IE6 및 IE7의 경우 코드가 너무 커질 뿐입니다...

Firefox에서는 이 방법이 버전 3.6에서 올바르게 작동하고 Opera에서는 버전 10.0부터 관련성이 거의 없기 때문에 목발을 생각해 내지 못했습니다.

모든 최신 브라우저는 HTML5 하이퍼텍스트 마크업 표준과 CCS3 디자인 스타일을 지원합니다. 그리고 귀하의 사이트(템플릿)가 최신 표준을 지원하는 경우 그래픽 편집기를 사용하지 않고도 둥근 모서리, 그림자, 그라데이션 채우기와 같은 디자인을 변경할 수 있습니다.

어디에서나 웹마스터는 웹사이트의 블록과 프레임에 둥근 모서리를 사용합니다. 이 기사에서는 타사 프로그램을 사용하지 않고 CSS만 사용하여 웹 사이트에서 그림과 사진의 모서리를 둥글게 만드는 방법을 설명합니다.

기사에 제공된 예제가 화면에 올바르게 표시되도록 하려면 최신 버전의 브라우저, FireFox, Chrome 및 이를 기반으로 하는 브라우저(Yandex.Browser, Amigo 등)를 사용해야 합니다.

DIV 블록의 모서리 둥글게 만들기

CSS3 표준에 따르면 블록은 DIV모서리가 둥글게 되어 있어서 스타일을 지정해야 합니다. 국경 반경, 예를 들어 다음과 같습니다.

테두리 반경: 10px;

명확성을 위해 모서리가 직선이고 둥근 두 개의 블록을 그려보겠습니다.

직각으로 블록

모서리가 둥근 블록

사진 모서리 둥글리기

위의 예와 유사하게 사이트의 이미지(예: 사진) 모서리를 둥글게 만들 수 있습니다. 명확성을 위해 페이지에서 사진의 모서리를 둥글게 만들어 보겠습니다.

CSS 처리가 없는 이미지는 다음과 같습니다.

이제 모서리가 둥글게 되었습니다.

테두리 반경: 10px;

정말 "아름답게" 만들려면 처음부터 테두리를 좀 추가해 볼까요...

테두리 반경: 10px; 테두리: 5px #ccc 솔리드;

그리고 그림자:

테두리 반경: 10px; 테두리: 5px #ccc 솔리드; 상자 그림자: 0 0 10px #444;

아래 옵션(경계 없이 그림자가 있는 둥근 모서리)은 마우스 패드와 매우 유사합니다.

테두리 반경: 10px; 상자 그림자: 0 0 10px #444;

그리고 마지막으로 이미지의 완전한 조롱

테두리 반경: 50%; 테두리: 5px #cfc 솔리드; 상자 그림자: 0 0 10px #444;

이미지를 새창에서 열면 그(이미지)는 변함이 없고 모서리, 그림자 등은 모두 처리 결과일 뿐임을 알 수 있습니다. CSS브라우저별 스타일.

작은 서정적 일탈

스타일 국경테두리만큼 이미지 크기를 늘립니다. 값이 지정된 경우 테두리: 5px을 선택하면 최종 이미지가 10픽셀씩 더 넓어지고 높아집니다. 어떤 경우에는 사이트 레이아웃이 작동하지 않을 수 있다는 점을 명심하세요.

스타일 상자 그림자그림의 크기에는 영향을 미치지 않으며 그림자가 인접한 요소 위로 지나가는 것처럼 보입니다. 그것을 사용할 때 사이트 레이아웃이 손상되지 않습니다.

WordPress에서 이미지 모서리를 둥글게 만드는 방법

위의 모든 예에서는 HTML 코드 태그에 직접 스타일을 작성했습니다. 예를 들어 마지막은 다음과 같습니다.

한 장의 사진이나 사진을 다시 정리해야 할 때 좋습니다. 모든 것을 바꾸고 싶다면 어떻게 해야 할까요? 글쎄요, 각 사이트의 표시를 편집하기 위해 사이트 전체를 돌아다니지는 않을 것입니다. 대부분의 경우 WordPress 태그 IMG여러 스타일 클래스를 정의합니다. 하나는 이미지 파일의 고유 이름, 다른 하나는 크기, 다른 하나는 정렬입니다. 위의 매개변수로 그 중 하나를 보완할 수 있습니다.

예를 들어 정렬이 지정되지 않은 모든 이미지의 경우 파일에서 스타일.css WordPress 테마의 경우 다음을 입력합니다.

정렬 없음( 테두리 반경: 10px; 테두리: 5px #cfc 솔리드; 상자 그림자: 0 0 10px #444; )

또는 사이트의 모든 사진에 대해 가장 엄격한 방법입니다. 모든 태그의 스타일을 재정의해 보겠습니다. IMG:

Img( 테두리 반경: 10px; 테두리: 5px #cfc 솔리드; 상자 그림자: 0 0 10px #444; )

마지막 옵션은 WordPress뿐만 아니라 모든 CMS에 적합합니다. 그리고 간단한 경우에도 HTML이미지를 표시할 때 태그가 IMG스타일 클래스가 할당되지 않았습니다. 하지만 조심하세요. 태그 표시 옵션을 재정의하는 경우 IMG사이트에 있는 모든 사진의 모양이 변경됩니다!

결론 대신

기사의 모든 예제는 조건부이며 이미지 처리를 위한 CSS의 기능 중 일부를 보여주고 그것이 얼마나 간단한지 보여주기 위한 것입니다.

CSS3 프레임다음을 허용하는 속성으로 요소 테두리의 형식을 지정하는 기능을 보완합니다. 모퉁이를 돌다요소 및 사용 이미지요소의 테두리를 디자인합니다.

둥근 모서리와 액자

1. 테두리 반경을 사용한 둥근 모서리

브라우저 지원

즉: 9.0
파이어폭스: 4.0
크롬: 4.0
원정 여행: 5.0, 3.1 -웹킷-
오페라: 10.5
iOS 사파리: 7.1
오페라 미니: —
안드로이드 브라우저: 4.1
안드로이드용 크롬: 44

이 속성을 사용하면 인라인 요소와 블록 요소의 모서리를 둥글게 만들 수 있습니다. 각 각도의 곡선은 모양을 정의하는 하나 또는 두 개의 반경을 사용하여 정의됩니다. 원또는 타원. 반경은 전체 배경에 적용됩니다. 요소에 테두리가 없더라도 시컨트의 정확한 위치는 background-clip 속성을 사용하여 결정됩니다.

border-radius 속성을 사용하면 모든 모서리를 한 번에 둥글게 할 수 있으며 border-top-left-radius , border-top-right-radius , border-bottom-right-radius , border-bottom-left-radius 속성을 사용하여 각 모서리를 별도로 둥글게 할 수 있습니다.

border-radius 속성에 두 개의 값을 설정하면 첫 번째 값은 왼쪽 위그리고 오른쪽 하단, 그리고 두 번째 - 맨 위 오른쪽그리고 왼쪽 하단.

/를 통해 특정된 값 수평의그리고 수직 반경. 재산은 상속되지 않습니다.

옵션

Div(너비: 100px; 높이: 100px; 테두리: 5px 단색;).r1(테두리 반경: 0 0 20px 20px;).r2(테두리 반경: 0 10px 20px;).r3(테두리 반경: 10px 20px ;) .r4(테두리 반경: 10px/20px;) .r5(테두리 반경: 5px 10px 15px 30px/30px 15px 10px 5px;).r6(테두리 반경: 10px 20px 30px 40px/30px;) .r7( 테두리 반경: 50%;).r8(테두리 상단: 없음; 테두리 하단: 없음; 테두리 반경: 30px/90px;).r9(테두리 하단 왼쪽 반경: 100px;).r10(테두리 -반지름: 0 100%;).r11 (테두리 반경: 0 50% 50% 50%;).r12 (테두리-왼쪽 상단 반경: 100% 20px; 테두리-하단 오른쪽-반경: 100% 20px ;)
쌀. 1. 블록 모서리를 둥글게 만드는 다양한 옵션의 예

2. 테두리 이미지

브라우저 지원

즉: 11.0
파이어폭스: 15.0, 3.5 -모즈-
크롬: 16.0, 7.0 -웹킷-
원정 여행: 6.0, 3.0 -웹킷-
오페라: 15.0, 11.0 -o-
iOS 사파리: 7.1
오페라 미니: 8 -o-
안드로이드 브라우저: 4.4, 4.1 -웹킷-
안드로이드용 크롬: 42

이 속성을 사용하면 이미지를 요소의 테두리로 설정할 수 있습니다. 이미지의 주요 요구 사항은 대칭이어야 한다는 것입니다. 속성에는 다음 값이 포함됩니다: (border-image: 너비 소스 슬라이스 반복 시작;) .

이러한 간단한 이미지를 사용하면 요소에 대해 이와 같은 프레임을 얻을 수 있습니다.

/* 예 1 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: Stretch; ) /* 예 2 */ div ( width: 260px; height: 100px; border-style: solid; border-image-width: 15px; border-image-source: url(border_round. png); 테두리 이미지-슬라이스: 30; 테두리-이미지-반복: 라운드);
쌀. 2. 이미지를 활용한 블록 경계 디자인의 예

A - B - C - D 컷은 프레임의 모서리를 형성하며, 그 사이에 있는 이미지 부분은 border-image-repeat 속성의 지정된 값에 따라 프레임의 나머지 공간을 채웁니다. 모서리 부분의 크기(이 예에서는 숫자 30)는 border-image-slice 속성의 값을 사용하여 설정됩니다.

2.1. 테두리 이미지 너비

이 속성은 요소 테두리의 이미지 너비를 지정합니다. 너비를 지정하지 않으면 기본값은 1입니다.

테두리 이미지 너비
값:
길이	길이 단위(px/em)로 테두리 너비를 설정합니다. 한 번에 1~4개의 값을 설정할 수 있습니다. 하나의 값을 지정하면 프레임의 모든 측면의 너비가 동일하고 두 값은 상하 및 오른쪽-왼쪽의 너비를 지정하는 등입니다.
숫자	border-width 값에 곱해지는 숫자 값입니다.
%	요소 테두리의 너비는 이미지 크기를 기준으로 계산됩니다. 너비를 기준으로 수평, 높이를 기준으로 수직.
자동	border-image-slice 값에 해당합니다.
초기의
상속하다

통사론

Div (테두리-이미지-너비: 30px;) 그림. 3. 다양한 유형의 값을 사용하여 이미지 프레임의 너비를 설정하는 예

2.2. 테두리 이미지 소스

이 속성은 블록의 테두리를 장식하는 데 사용될 이미지의 경로를 지정합니다.

통사론

Div(테두리-이미지-소스: url(border.png);)

2.3. 테두리 이미지 슬라이스 요소

이 속성은 요소의 테두리를 정의하는 데 사용되는 이미지 부분의 크기를 결정하고 이미지를 9개 부분(모서리 4개, 모서리 사이의 가장자리 4개, 중앙 부분)으로 나눕니다.

값:
숫자	프레임 부분의 크기는 1개, 2개, 3개 또는 4개의 값을 사용하여 설정할 수 있습니다. 하나의 값은 요소 양쪽의 테두리 크기를 동일하게 설정합니다. 두 가지 값: 첫 번째 값은 위쪽 및 아래쪽 테두리의 크기를 결정하고 두 번째 값은 오른쪽 및 왼쪽 테두리의 크기를 결정합니다. 세 가지 값: 첫 번째 값은 위쪽 테두리의 크기를 결정하고, 두 번째 값은 오른쪽과 왼쪽, 세 번째 값은 아래쪽 테두리의 크기를 결정합니다. 네 가지 값: 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리의 크기를 정의합니다. 숫자 값은 px 수를 나타냅니다.
%	테두리 크기는 이미지 크기를 기준으로 계산됩니다. 너비를 기준으로 수평, 높이를 기준으로 수직.
채우다	값은 숫자 또는 백분율과 함께 표시됩니다. 지정하면 이미지가 프레임 내부 가장자리에 의해 잘리지 않고 프레임 내부 영역도 채워집니다.
초기의	이 속성을 기본값으로 설정합니다.
상속하다	상위 요소에서 이 속성의 값을 상속합니다.

통사론

Div(테두리-이미지-슬라이스: 50 20;)
쌀. 4. 이미지 프레임 슬라이스를 지정하는 예

2.4. 테두리 이미지 반복

이 속성은 배경 이미지가 프레임 모서리 사이의 공간을 채우는 방법을 제어합니다. 단일 값 또는 값 쌍을 사용하여 지정할 수 있습니다.

통사론

Div(테두리-이미지-반복: 반복;) 그림. 5. 다양한 유형의 값을 사용하여 이미지 프레임의 중앙 부분을 반복하는 예

2.5. 테두리 이미지 시작

이 속성을 사용하면 지정된 길이만큼 요소의 테두리를 넘어 이미지 프레임을 이동할 수 있습니다. 하나 또는 네 개의 값을 사용하여 지정할 수 있습니다.

통사론

Div(테두리 이미지 시작: 10px;)
쌀. 6. 다양한 유형의 값을 사용하여 이미지 프레임을 이동하는 예

3. 외곽 프레임 오프셋 외곽선 오프셋

이 속성은 테두리 요소의 테두리와 외곽선 속성을 사용하여 생성된 외부 테두리 사이의 거리를 지정합니다.

/*그림 1:*/ img ( border: 1px 단색 분홍색; 윤곽선: 1px 점선 회색; 윤곽선 오프셋: 3px; ) /*그림 2:*/ img ( border-width: 1px 10px; border-style: solid; 테두리 색상: 분홍색; 윤곽선: 1px 점선 회색; 윤곽선 오프셋: 3px;
쌀. 7. 외부 프레임으로 이미지를 장식하는 예

4. 그라데이션 프레임

border-image의 값은 이미지일 뿐만 아니라 그라데이션 채우기도 가능합니다.

반투명 프레임

색상 중 하나가 투명합니다. 이러한 방식으로 요소의 모든 측면에 대한 경계를 한 번에 설정하거나 각 측면에 대해 별도로 설정할 수 있습니다. 테두리의 두께는 border-width 속성에 의해 제어됩니다.

* (box-sizing:border-box;).wrap ( 높이: 200px; 패딩: 25px; 배경: #00E4F6; ) .gradient ( 높이: 150px; 너비: 50%; 여백: 0 자동; 테두리: 10px 솔리드 투명 ; 테두리 이미지: 선형 그라데이션(오른쪽으로, 투명 0%, #ADF2F7 100%);

우편 봉투

* (box-sizing:border-box;).wrap ( 높이: 200px; 패딩: 25px; ) .gradient ( 높이: 150px; 너비: 50%; 여백: 0 자동; 테두리: 10px 단색 투명; 테두리 이미지: 10개의 반복 선형 그라데이션(45deg, #A7CECC, #A7CECC 10px, 투명 10px, 투명 20px, #F8463F 20px, #F8463F 30px, 투명 30px, 투명 40px )

모두들 좋은 아침, 오후, 저녁, 밤이 되세요. Dmitry Kostin이 계속해서 당신과 함께합니다. 어느 날 여러 사진을 보다가 마음에 드는 사진이 몇 개 있었습니다. 그리고 그들은 모서리가 둥글기 때문에 그것을 좋아했습니다. 즉시 더 흥미로워 보입니다. 그렇게 생각하지 않나요? 그래서 오늘 수업에서는 사진을 더욱 흥미롭게 보이도록 Photoshop에서 모서리를 둥글게 만드는 방법을 알려 드리고자 합니다.

제가 Photoshop을 좋아하는 이유는 동일한 작업을 여러 가지 방법으로 수행할 수 있다는 점입니다. 그래서 여기에 있습니다. 포토샵을 시작해 보겠습니다.

가장자리를 사용한 앤티앨리어싱

이 방법은 이전 방법과 유사하지만 여전히 매우 다릅니다. 우리는 같은 이미지로 모든 것을 할 것입니다.

모양을 만들어서

세 번째 방법은 이미 이전 두 가지 방법과 근본적으로 다릅니다. 그러니 몇 초 동안 휴식을 취하고 계속 진행하십시오. 이미지를 변경하지 않고 이 차를 다시 Photoshop에 로드하겠습니다.

당신이 어떻게 끝났는지 아시나요? 그림의 모서리는 둥글게 되어 있는데, 이는 모두 우리가 그린 둥근 사각형이 있는 곳에만 표시되기 때문입니다. 하지만 이제 프레임 도구를 사용하여 추가 사진을 자르거나 사진을 즉시 저장할 수 있으며 이미 둥근 모서리가 있는 별도의 이미지가 생성되어 있습니다.

모든 것을 스스로 시도하고 동시에 제시된 방법 중 어느 것이 더 선호되는지 알려주십시오.

그건 그렇고, Photoshop에 공백이 있거나 가능한 한 짧은 시간에 완전히 배우고 싶다면 하나를 시청하는 것이 좋습니다. 초보자를 위한 훌륭한 포토샵 강좌. 과정은 훌륭하게 진행되었으며, 모든 내용이 훌륭하게 설명되고 표시되었으며, 각 자료가 매우 자세하게 논의되었습니다.

자, 오늘 수업을 마무리하겠습니다. 새 기사를 구독하고 친구들과 공유하는 것을 잊지 마세요. 제 블로그에서 뵙게 되어 반가웠습니다. 나는 당신을 다시 기다리고 있습니다. 안녕.

감사합니다, 드미트리 코스틴