현재 위치 - 중국 분류 정보 발표 플랫폼 - 비즈니스 서비스 정보 - Css3 에 새로 추가된 속성은 무엇입니까

Css3 에 새로 추가된 속성은 무엇입니까

Css3 새 속성:

첫째, RGBA 및 투명도

RGBA 는 RGB 색상 모델의 확장입니다. 기본적으로 설정된 요소에 알파 채널을 추가합니다. 즉, 빨강, 녹색, 파랑의 세 가지 색상 외에 투명도를 나타내는 채널이 추가됩니다. 여기서 RGB 값은 각각 빨강, 녹색, 파랑을 나타내고 알파 값은 0 에서 1 (소수점 한 자리) 까지입니다.

둘째, background 속성

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

Background-origin: 배경 그림의 위치 지정 영역을 지정합니다.

Background-size: 배경 그림의 크기를 지정합니다.

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

셋째, word-wrap 속성

Word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 줄 바꿈할 수 있습니다.

주: 모든 주요 브라우저는 word-wrap 속성을 지원합니다.

기본 구문: word-wrap: normal | break-word;

넷째, 텍스트 섀도우 속성

Text-shadow 속성: 텍스트에 그림자를 설정합니다.

Text-shadow 기본 구문: text-shadow: 5px5px5px # ff0000;

매개변수는 각각 수평 그림자, 수직 그림자, 블러 거리, 그림자 색상을 나타냅니다.

다섯째, font-face 속성

Font-face 속성: 사용자 고유의 글꼴 정의

새 @font-face 규칙에서 먼저 글꼴 이름 (예: myFirstFont) 을 정의한 다음 글꼴 파일을 가리켜야 합니다.

여섯째, border-radius 속성

Border-radius 속성: 네 개의 border-*-radius 속성을 설정하는 단축 속성입니다.

기본 구문: border-radius: 1-4 길이 |/1-4 길이 |;

참고: 이 속성을 사용하면 요소에 필렛 테두리를 추가할 수 있습니다!

일곱, border-image 속성

Border-image: 그림을 div 요소를 둘러싸는 테두리로 지정

Border-image 기본 구문: border-image: URL (border.png) 30 30 round

여덟, box-shadow 속성

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

Box-shadow 기본 구문: box-shadow: 10px10px5px # 88888

아홉, 미디어 쿼리

미디어 쿼리는 브라우저 크기가 변경될 때 다른 속성을 사용하는 두 세트의 CSS 를 정의합니다.