CSS3의 새로운 속성은 무엇입니까?

css3의 새로운 속성에는 word-wrap, word-break, text-shadow, border-radius, box-shadow, border-image, background-size, 변환, 전환 등이 포함됩니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

css3 새로운 속성

1. CSS3 텍스트 효과:

• hanging-tempotion: 구두점 문자가 와이어프레임 밖에 있는지 여부를 지정합니다.
  

• punktation-trim: 구두점 문자를 자를지 여부를 지정합니다.

• text-align-last: 마지막 줄 또는 강제 개행 직전 줄을 정렬하는 방법을 설정합니다.

• text-emphasis: 강조 표시와 강조 표시의 전경색을 요소의 텍스트에 적용합니다.

• text-justify: text-align이 "justify"로 설정된 경우 사용되는 정렬 방법을 지정합니다.

• text-outline: 텍스트의 윤곽선을 지정합니다.

• text-overflow: 텍스트가 포함된 요소를 오버플로할 때 발생하는 상황을 지정합니다.

• text-shadow: 텍스트에 그림자를 추가합니다.

• text-wrap: 텍스트 줄 바꿈 규칙을 지정합니다.

• word-break: 중국어, 일본어, 한국어가 아닌 텍스트에 대한 줄 바꿈 규칙을 지정합니다.

• word-wrap: 분할할 수 없는 긴 단어를 분할하여 다음 줄로 줄 바꿈할 수 있습니다.

2. CSS3 테두리:

• border-radius: CSS3 둥근 테두리.

• box-shadow: 상자에 그림자를 추가하는 데 사용됩니다.

• border-image: CSS3 테두리 이미지, 이미지를 사용하여 테두리를 만들 수 있습니다.

3. CSS3 배경:

• Background-size: 속성은 배경 이미지의 크기를 지정합니다.

• background-origin: 이 속성은 배경 이미지의 위치 지정 영역을 지정합니다.

• background-clip: 배경의 그리기 영역을 지정합니다.​

(학습 영상 공유: css 영상 튜토리얼)

4. CSS3 변형:

• transform은 요소에 2D 또는 3D 변형을 적용합니다.

• transform-origin을 사용하면 변환되는 요소의 위치를 ​​변경할 수 있습니다.

• transform-style은 중첩된 요소가 3D 공간에 표시되는 방식을 지정합니다.

• perspective는 3D 요소의 원근 효과를 지정합니다.

• perspective-origin은 3D 요소의 아래쪽 위치를 지정합니다.

• backface-visibility는 화면을 향하지 않을 때 요소가 표시되는지 여부를 정의합니다.

5. CSS3 전환:

한 스타일에서 다른 스타일로 변환될 때 요소에 효과를 추가하세요.

• transition: 단축 속성으로, 하나의 속성에 4개의 전환 속성을 설정하는 데 사용됩니다.

• transition-property: 전환이 적용되는 CSS 속성의 이름을 지정합니다.

• transition-duration: 전환 효과에 걸리는 시간을 정의합니다. 기본값은 0입니다.

• transition-timing-function: 전환 효과의 시간 곡선을 지정합니다. 기본값은 "쉽게"입니다.

• transition-delay: 전환 효과가 시작되는 시기를 지정합니다. 기본값은 0입니다.

6. CSS3 애니메이션: CSS3를 통해 우리는 많은 웹 페이지에서 애니메이션 이미지, 플래시 애니메이션 및 JavaScript를 대체할 수 있는 애니메이션을 만들 수 있습니다.

• @keyframes: 애니메이션을 지정합니다.

• animation: animation-play-state 속성을 제외한 모든 애니메이션 속성에 대한 약식 속성입니다.

• animation-name: @keyframes 애니메이션의 이름을 지정합니다.

• animation-duration: 애니메이션이 한 사이클을 완료하는 데 걸리는 시간(초 또는 밀리초)을 지정합니다. 기본값은 0입니다.

• animation-timing-function: 애니메이션의 속도 곡선을 지정합니다. 기본값은 "쉽게"입니다.

• animation-delay: 애니메이션이 시작되는 시기를 지정합니다. 기본값은 0입니다.

• animation-iteration-count: 애니메이션이 재생되는 횟수를 지정합니다. 기본값은 1입니다.

• animation-direction: 다음 주기에서 애니메이션을 역방향으로 재생할지 여부를 지정합니다. 기본값은 "정상"입니다.

• animation-play-state: 애니메이션이 실행 중인지 일시 중지되었는지 지정합니다. 기본값은 "실행 중"입니다.

• animation-fill-mode: 객체 애니메이션 시간 이외의 상태를 지정합니다.

7. CSS3 다중 열:

• column-count: 요소를 나누어야 하는 열 수를 지정합니다.

• column-fill: 열을 채우는 방법을 지정합니다.

• column-gap: 열 사이의 간격을 지정합니다.

• column-rule: 모든 열-rule-* 속성의 약어

• column - rule-color: 두 열 사이의 테두리 색상 지정

• column-rule-style: 두 열 사이의 테두리 스타일 지정

• column-rule-width: 두 열 사이의 테두리 두께 지정 columns

• column-span: 요소가 걸쳐야 하는 열 수를 지정합니다.

• column-width: 열의 너비를 지정합니다.

• columns: 열 너비 및 열 개수 설정의 약어

8. CSS3 사용자 인터페이스:

• resize: 속성은 사용자가 요소 크기를 조정할 수 있는지 여부를 지정합니다.

• box-sizing: 속성을 사용하면 특정 영역에 정확히 맞는 항목을 정확한 방식으로 정의할 수 있습니다.

• outline-offset: 속성은 윤곽선을 오프셋하고 테두리 가장자리 너머에 윤곽선을 그립니다.

• appearance: 요소를 표준 UI 요소처럼 보이게 만들 수 있습니다.

• icon: 제작자에게 해당 아이콘에 해당하는 요소를 설정할 수 있는 기능을 제공합니다.

• nav-down: 아래쪽 화살표 탐색 키를 사용할 때 탐색할 위치를 지정합니다.

• nav-index: 요소의 탭 순서를 지정합니다.

• nav-left: 왼쪽 화살표 탐색 키를 사용하여 탐색할 위치를 지정합니다.

• nav-right: 오른쪽 화살표 탐색 키를 사용하여 탐색할 위치를 지정합니다.

• nav-up: 위쪽 화살표 탐색 키를 사용할 때 탐색할 위치를 지정합니다.

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 CSS3의 새로운 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!