CSS3에는 어떤 새로운 속성 스타일이 추가되나요? 일반적으로 사용되는 CSS3의 새로운 기능 소개-CSS 튜토리얼-php.cn

CSS3에는 어떤 새로운 속성 스타일이 추가되나요? 일반적으로 사용되는 CSS3의 새로운 기능 소개

青灯夜游

풀어 주다： 2018-10-08 11:07:11

원래의

3666명이 탐색했습니다.

CSS3의 새로운 속성 스타일(새로운 기능)은 무엇인가요? 이 장에서는 CSS3에서 일반적으로 사용되는 몇 가지 새로운 속성 스타일(새로운 기능)을 소개하는 데 중점을 둘 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS3의 새로운 속성 스타일(새로운 기능)을 소개하기 전에 먼저 CSS3가 무엇인지 알아야 합니다.

CSS는 Cascading Style Sheets의 약어입니다.
CSS는 브라우저에서 해석되는 언어로 컴파일 없이 브라우저에서 직접 실행할 수 있는 마크업 언어입니다.
CSS는 HTML이나 XML을 표현하는 데 사용되는 마크업 언어입니다.
CSS는 W3C CSS 워킹 그룹에서 권장하고 유지 관리합니다.
CSS는 프로그래밍 초보자에게 필수 코스입니다. CSS 스타일을 사용하면 페이지를 아름답게 만들 수 있습니다.
CSS 구문은 선택기, 속성, 값의 세 부분으로 구성됩니다(예: 선택기 {속성: 값}).

CSS3은 최신 CSS 표준으로, 새로운 기능인 몇 가지 새로운 속성 스타일을 추가합니다. CSS3에서 일반적으로 사용되는 몇 가지 새로운 기능(속성 스타일)을 소개합니다. 🎜#

border-image attribute

: 모든 border-image-* 속성의 단축 속성을 설정하는 데 사용되는 단축 속성입니다. border-radius attribute: 4개의 border-*-radius 속성을 설정하는 데 사용되는 단축 속성입니다.

border-top-left-radius 왼쪽 위 모서리 설정 border-top-right-radius 오른쪽 위 모서리 설정 border-bottom-right-radius 아래쪽 모서리 설정 왼쪽 모서리

border-bottom-right-radius 오른쪽 하단 모서리 설정

border-top-left-radius: x y는 왼쪽 상단 모서리의 x축 오프셋을 나타내고 y는 y를 나타냅니다. 축 오프셋을 지정하고 백분율과 픽셀을 설정할 수 있습니다. 테두리 반경:;

하나의 값은 왼쪽 위, 오른쪽 위, 왼쪽 아래 및 오른쪽 아래를 나타내며 모두

입니다. 두 값은 첫 번째 값 왼쪽 위 및 오른쪽 아래를 나타냅니다. 두 번째 값은 오른쪽 위 및 왼쪽 아래를 나타냅니다.
세 가지 값은 다음을 나타냅니다. 첫 번째 값은 왼쪽 위, 두 번째 값은 오른쪽 위 및 왼쪽 아래, 세 번째 값은 오른쪽 아래
이며 4개는 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래 및 왼쪽 아래입니다. .

테두리 반경 0 0 0 0/ 0 0 0 0;

처음 4개는 4개 x 방향의 x축 오프셋이고 마지막 4개는 y의 오프셋입니다. -축 방향#🎜 🎜#

box-shadow 속성
: 상자에 하나 이상의 그림자를 추가합니다.

구문: 상자 그림자: 값

값 설명:

(1) 첫 번째 값: Npx, 그림자는 수평 방향으로 N픽셀만큼 오프셋되며, 양수는 오른쪽으로, 음수는 왼쪽으로
(2) 두 번째 값 : Npx, 그림자는 수직 방향으로 N 픽셀만큼 오프셋되며, 양수는 아래로, 음수는 위로

(3) 세 번째 값 : 깃털 크기(흐릿한 크기)

(4) 네 번째 값: 그림자 크기 (5) 다섯 번째 값: 색상 기본값은 검정색입니다. (6) 여섯 번째 매개변수: 내부 및 외부 그림자 기본값은 내부 그림자입니다

. (7) 여러 개의 그림자를 쉼표로 구분하여 작성할 수 있습니다

(8) 그림자는 축약될 수 있지만 #

배경 크기 속성
을 추가해야 한다는 점에 유의해야 합니다. 배경 이미지의 크기를 지정합니다. (중요 속성)

구문: background-size: value

값 설명:

(1) 값이 하나만 있는 경우 너비는 늘어나고 높이는 비례적으로 유지됩니다. px 또는 백분율을 지원할 수 있습니다. 백분율은 상자 자체의 너비와 높이를 나타냅니다

(2) 두 개의 값이 있는 경우 너비와 높이가 각각 해당 값으로 늘어나며 변형될 수 있습니다. px 또는 백분율을 지원할 수 있습니다. 백분율은 상자 자체의 너비와 높이를 나타냅니다#🎜 🎜 # (3) 포함 크기 조정 시 이미지의 너비 또는 높이가 상자 가장자리에 "접촉"하면 변경이 중지됩니다(너비 또는 높이는 하나만 충족하면 됩니다)

(4) contain을 기준으로 공백이 없는지 확인합니다. 이것이 표지의 효과입니다(너비와 높이가 모두 충족되어야 함). 🎜🎜#: 배경 이미지 위치 지정 영역을 지정합니다.

구문: background-origin: 값 값 설명:

(1) border-box : 테두리를 무시하고 테두리의 시작점 0, 0점

에서 직접 타일을 만듭니다. (2) padding-box : 기본값, 패딩을 무시하고 패딩 시작점 0부터 바로 타일링, 0점 (3) content-box: 타일링은 콘텐츠 부분에서 시작되며 padding과 관련됩니다

Background-image attribute

: 요소의 배경 이미지를 설정합니다.

Background-repeat attribute
: 배경 이미지 반복 여부와 방법을 설정합니다.

3. 텍스트 효과

text-align-last 속성: 마지막 줄 정렬 방법을 설정합니다. 또는 마지막 줄 강제 개행 문자 바로 앞의 줄.

text-emphasis属性：向元素的文本应用重点标记以及重点标记的前景色。

text-justify属性：规定当 text-align，设置为“justify”时所使用的对齐方法。

text-outline属性：规定文本的轮廓。