CSS3 둥근 모서리 및 둥근 테두리 사용 방법 요약-CSS 튜토리얼-php.cn

CSS3 둥근 모서리 및 둥근 테두리 사용 방법 요약

伊谢尔伦

풀어 주다： 2017-06-05 11:06:57

원래의

4030명이 탐색했습니다.

CSS3이 등장하기 전에는 둥근 모서리 효과를 이미지나 여백 속성을 통해 얻을 수 있었습니다. 기존의 둥근 모서리 생성 솔루션에는 배경 패턴으로 여러 이미지가 필요했습니다. CSS3가 등장한 후에는 여러 이미지를 만드는 데 시간을 낭비할 필요가 없으므로 작업량이 크게 줄어들고 웹 페이지 성능이 향상되며 페이지 로딩 속도가 향상되고 시각적 안정성이 향상됩니다. 이제 CSS3의 둥근 모서리에는 많은 장점이 있다고 말했으므로 CSS3 둥근 모서리와 둥근 테두리를 사용하는 방법을 요약해 보겠습니다.

먼저 CSS3 둥근 모서리 소개 챕터 과정

을 배울 수 있습니다.

CSS3 반올림 사용 관련 지식 모서리 및 둥근 테두리

css3 둥근 모서리 소개 및 응용 기술

적응형 타원 및 둥근 모서리 구성,

CSS에서만 원 만들기 테두리 반경 속성을 설정해야 합니다. 값을 측면 길이의 절반으로 설정합니다. 여기서는 border-radius의 속성을 포괄적으로 소개합니다. border-radius는 축약된 속성입니다. 확장 공식은 border-top-left-radius, border-top-right-radius, 테두리 - 왼쪽 하단 반경. 또한 잘 알려지지 않은 기능도 있습니다. border-radius는 두 값이 슬래시( / )로 구분되어 있는 한 수평 및 수직 반경을 별도로 지정할 수 있습니다(둥근 모서리의 수평 및 수직 반경은 동일함). 결합할 수 있습니다). 이러한 특성을 결합하여 border-radius:50%의 세부 확장은 border-radius:50% 50% 50% 50%/50% 50% 50% 50%이어야 합니다.

2. CSS3 둥근 테두리 및 테두리 이미지 효과 예시 공유학습 포인트는 다음과 같습니다.

둥근 테두리-반경;

테두리 이미지 테두리-이미지 . border-radius 속성을 사용하면 요소에 둥근 테두리를 추가할 수 있습니다! border-image 속성은 이미지의 테두리를 설정하는 데 사용됩니다. 3. CSS3 둥근 모서리 및 그라데이션 기능의 예제 코드 공유

선형 그라데이션: 배경: 선형-그라디언트(그라디언트 형태, 첫 번째 색상 시작점, 중간 색상 포인트, 중간 색상 위치, 끝 포인트 색상 설정) ; 선형: 그라디언트 유형(선형 그라디언트); 그라디언트 형식: 선택적 매개변수를 선택하는 두 가지 방법이 있습니다. - 1. 회전 각도를 설정합니다. 0도는 왼쪽에서 오른쪽으로 수평을 의미하고, 90도는 위에서 아래로 시작하는 것을 의미합니다. 0도에서는 시계 반대 방향으로 변경됩니다. 4.

CSS3 둥근 테두리 사용 - Ground Tornado

border-radiusborder-radius:50px에 대한 자세한 설명

오른쪽 상단, 왼쪽 하단, 가로 및 세로 거리는 50px입니다

border-radius:50%; 여기의 % 기호는 적용된 CSS 스타일 요소의 길이와 너비를 기준으로 합니다.

border-radius:50% 30% 상하, 수평 및 수직 는 약 50%, 가로 세로는 30%

border-radius:50% 30% 10% 위, 가로 및 세로는 50%, 왼쪽 및 오른쪽, 가로 및 세로는 30%, 아래, 가로 및 세로 10%

border-radius:10 % 50% 30% 10% 위쪽, 가로 및 세로 모두 10%입니다. 오른쪽, 가로, 세로 모두 50%입니다. 아래, 가로, 세로 모두 30%입니다. 왼쪽, 가로, 세로 모두 10% /앞은 가로, 뒷면은 세로

border-radius: 50% / 30% 위, 왼쪽, 아래 및 오른쪽, 가로는 50%, 세로 30%

border-radius:50% / 30% 10% 위쪽, 오른쪽, 아래쪽, 왼쪽, 가로는 50%, 위쪽 및 아래쪽 세로는 30%, 왼쪽 및 오른쪽 세로는 10%입니다. CSS3 둥근 모서리, 그림자, 투명

CSS3에서는 둥근 모서리를 구현하는 방법이 두 가지가 있습니다.

첫 번째는 배경 이미지가 기존 CSS에서는 각 요소마다 하나의 배경 이미지만 가질 수 있다는 것입니다. 여러 배경 이미지를 가지려면 요소에 4를 추가합니다. 1/4 원형 배경 이미지를 네 모서리에 배치하여 둥근 모서리를 만들 수 있습니다.

두 번째 방법은 간단하며 그림을 사용하지 않고 CSS로 직접 구현할 수 있습니다.