CSS3의 새로운 기능은 무엇입니까? 새로운 속성은 무엇입니까? (요약)

이 글의 주요 목적은 CSS3의 새로운 기능이 무엇인지 요약하고 소개하는 것입니다.

우선 CSS가 무엇인지 다들 알아야겠죠?

간단히 말하면 CSS는 HTML이나 XML과 같은 파일 스타일을 표현하는 데 사용되는 컴퓨터 언어인 계단식 스타일 시트입니다. css3은 최신 CSS 표준입니다. CSS와 CSS3의 다양한 스타일 속성을 마스터할 수 있다면 누구나 아름답고 넉넉한 페이지를 쉽게 만들 수 있을 것이라고 믿습니다.

css3은 CSS의 최신 표준인데, css3의 새로운 기능은 무엇인가요?

아래에서는 간단한 코드 예제를 결합하여 몇 가지 중요한 새 기능, ​​즉 새 속성을 요약합니다!

1. RGBA 및 투명도

RGBA는 RGB 색상 모델의 확장입니다. 본질적으로 설정된 요소에 알파 채널도 추가합니다. 즉, 빨간색, 녹색, 파란색의 세 가지 색상 외에 투명도를 나타내는 채널도 추가되며 그중 RGB가 포함됩니다. 값은 각각 빨간색, 녹색, 파란색을 나타내며, 알파 값의 범위는 0부터 1(소수점 한 자리)까지입니다.

2. 배경 속성

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

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

배경 크기: 배경 이미지의 크기를 지정합니다.

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

3. Word-wrap 속성

word-wrap 속성을 사용하면 긴 단어나 URL 주소를 다음 줄로 넘길 수 있습니다.

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

기본 구문:

word-wrap: normal|break-word;

4.text-shadow 속성

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

텍스트 그림자의 기본 구문:

text-shadow： 5px 5px 5px #FF0000;

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

5 글꼴 얼굴 속성: 자신만의 글꼴을 정의합니다.

6. border-radius 속성

border-radius 속성: border-*-radius 4가지 속성을 설정하는데 사용되는 축약형 속성입니다.

border-radius: 1-4 length|% / 1-4 length|%;

7. border-image 속성

border-image: 이미지를 div 요소 주변의 테두리로 지정합니다.

border-image: url(border.png) 30 30 round

8box-shadow. attribute : 상자에 하나 이상의 그림자를 추가합니다. (박스 섀도우)

box-shadow 기본 구문:

box-shadow: 10px 10px 5px #888888