CSS3의 몇 가지 새로운 기능

background:rgba(254, 255, 200, 0.75);

예를 들어 위 코드에서 볼 수 있듯이 처음 세 매개변수는 각각 R, G, B의 세 가지 기본 색상입니다. 범위는 0-255입니다. 네 번째 매개변수는 0~1 범위의 배경 투명도입니다. 예를 들어 0.5는 50% 투명도를 나타냅니다. 이 속성을 사용하면 브라우저에서 Win7과 같은 반투명 유리 효과를 얻을 수 있습니다.

css3 둥근 모서리 샘플 코드

/*FireFox 구문*/

-moz-border-radius: 6px 6px 6px 6px;

-moz-border-radius-topright: 6px;

-moz-border-radius-topleft: 6px;

-moz- border-radius-bottomleft: 6px;

/*WebKit 핵심 브라우저 구문*/

-webkit -border-radius: 6px 6px 6px 6px;

-webkit-border-top-right-radius: 6px;

-webkit-border-top-left-radius: 6px;

-webkit-border-bottom-right-radius : 6px;

-webkit-border-bottom-left-radius: 6px

/* CSS 표준 구문*/

border-radius :6px 6px 6px 6px;

테두리 상단 오른쪽 반경: 6px;

테두리 상단 왼쪽 반경:

테두리 하단 오른쪽- radius: 6px;

border-bottom-left-radius:

위 코드에서 볼 수 있듯이 네 모서리 효과는 border-radius 코드로 지정할 수 있습니다. 6px 6px 6px 6px, 여기서 4개의 매개변수는 각각 왼쪽에서 오른쪽으로 왼쪽 위 모서리, 오른쪽 위 모서리, 오른쪽 아래 모서리, 왼쪽 아래 모서리를 나타냅니다. border-top-right-radius: 6px;처럼 각 모서리의 효과를 개별적으로 지정할 수도 있습니다.

그라디언트 색상

background: -moz-linear-gradient(

center top,/* 그라데이션이 있는 좌표 시작 */

rgba(254, 216, 80, 0.75),/* 그라데이션 시작 색상*/

rgba(230, 125, 30, 0.75) 50%,/* 중간 그라데이션 color */ www.2cto.com

rgba(254, 235, 121, 0.75)/* Gradient end color*/ ) 반복 스크롤 0 0 transparent; , Mozilla -moz-linear-gradient 태그를 사용하여 선형 그래디언트를 나타냅니다. 첫 번째 매개변수는 그라데이션이 시작되는 좌표를 나타내며 좌표 값일 수도 있고 위쪽, 아래쪽, 왼쪽, 오른쪽, 중앙 등의 값일 수도 있습니다. 다음 매개변수는 그라디언트의 색상 값으로, 개수에는 제한이 없으며 쉼표로 구분됩니다. 각 색상 값은 일반 16진수 색상 또는 RGBA 색상 값일 수 있습니다. 각 색상 뒤에는 전체 그라디언트에서 해당 색상의 비율을 나타내는 0-1 사이의 백분율 또는 소수가 올 수도 있습니다.

웹킷 그라데이션 구문

background:-webkit-gradient(

linear,/ * 그라디언트 유형 선형*/

왼쪽 상단,/* 그라디언트가 시작되는 좌표*/

왼쪽 하단,/* 그라디언트가 끝나는 좌표*/

from(rgba ( 254, 216, 80, 0.75)),/* 그라데이션 시작 색상*/

to(rgba(254, 235, 121, 0.75)),/* 그라데이션 끝 색상*/

color-stop(0.5,rgba(230, 125, 30, 0.75))/* 그라데이션의 중간 색상*/

)

반복 스크롤 0 0 transparent;

Webkit 브라우저는 -webkit-gradient 속성을 사용하여 그라디언트를 나타냅니다. 첫 번째 매개변수는 그라데이션 유형이며 일반적으로 선형입니다. 두 번째 매개변수는 그라디언트가 시작되는 좌표로 Mozilla의 첫 번째 매개변수와 동일합니다. 세 번째 매개변수는 그라디언트 끝의 좌표입니다. 네 번째와 다섯 번째는 각각 그라데이션의 시작 색상과 끝 색상으로, 16진수 색상 값 또는 RGBA 색상 값일 수 있습니다. 처음 5개 매개변수 뒤에 쉼표로 구분되어 변경 중간의 그라데이션 색상을 나타내는 최종 색상 중지 속성은 무한정 있을 수 있습니다. 색상 정지 속성에서 첫 번째 매개변수는 그라디언트 색상의 비율(0-1의 십진수 또는 백분율)입니다. 두 번째 매개변수는 그라디언트의 색상 값(16진수 색상일 수도 있음)입니다. 값 또는 RGBA 색상 값입니다.

변환

변환은 선형 색상 그라데이션 다음으로 CSS의 또 다른 블록버스터입니다. 우리는 주로 CSS와 HTML을 사용합니다. 특정 각도의 HTML 요소. 요소를 더욱 3차원적으로 보이게 하려면 이 효과를 그림으로 만들어야 하므로 많은 동적 적용 시나리오가 제한됩니다. Transform 속성의 도입으로 우리가 일반적으로 SVG와 같은 벡터 그리기 방법을 사용하여 간단한 CSS 속성만으로 달성해야 했던 기능이 가능해졌습니다. CSS3의 Transform 속성에는 주로 회전 회전, 크기 조정, 좌표 변환 이동, 좌표 기울기 기울기 및 행렬 행렬 변환이 포함됩니다. 각 속성이 어떻게 사용되는지 살펴보겠습니다.

/*Webkit 핵심 브라우저*/

-webkit-transform: 회전(-90deg)

- webkit -변환: 규모(2);

-webkit-transform: 규모(2, 1)

-webkit-transform: 번역(10px, 20px); -webkit-transform: 왜곡(30deg, -10deg);

-webkit-transform: 행렬(1, -0.2, 0, 1, 0, 0)

/*Firefox 브라우저*/

-moz-transform: 회전(-90deg)

-moz-transform: scale(2);

-moz-transform: 규모(2, 1);

-moz-transform: 번역(10px, 20px)

-moz-transform: 왜곡(30deg, -10deg) );

-moz-transform: 행렬(1, -0.2, 0, 1, 0, 0)

/*Opera 브라우저*/

-o - 변환: 회전(-90deg);

-o-transform: 스케일(2);

-o-transform: 스케일(2, 1) - o -변환: 변환(10px, 20px);

-o-변환: 왜곡(30deg, -10deg)

-o-변환: 행렬(1, -0.2, 0, 1 , 0, 0);

회전 속성 코드와 회전 각도 매개변수인 45deg는 시계 방향 45도 회전을 나타냅니다. 시계 반대 방향으로 45도 회전하면 -45도입니다.

회전과 유사하게 스케일링 속성은 스케일 키워드와 스케일링 매개변수로 구현됩니다. 매개변수 2가 하나만 있으면 HTML 요소의 X축 방향과 Y축 방향이 동시에 2씩 확대된다는 의미이고, 0.5는 동시에 절반으로 축소된다는 뜻이다. 2와 3이라는 두 개의 매개변수가 동시에 있는 경우 HTML 요소의 X축이 2배, Y축 방향이 3배 확대된다는 의미입니다.

좌표 변환 속성은 이름에서 알 수 있듯이 HTML 요소를 X, Y축 방향의 픽셀 수만큼 변환하는 속성으로 이를 구현합니다. 후자의 두 매개변수는 각각 X축과 Y축으로의 변환 정도를 나타냅니다.

skew 속성은 X축과 Y축을 중심으로 특정 각도로 개체를 기울일 수 있는 유용한 변환 기능이기도 합니다. 이는 회전의 회전과 다릅니다. 회전은 HTML 요소의 모양을 변경하지 않고 회전만 하는 반면 기울이기는 HTML 요소의 모양을 변경합니다. 기울이기에는 X축과 Y축을 따라 HTML 요소의 기울기를 나타내는 두 개의 매개변수가 있습니다.

행렬, 잘 읽으셨죠. 우리가 흔히 사용하는 행렬 변환입니다. 이 변환은 우리가 해석기하학에서 배운 좌표계 변환입니다. 6개의 매개변수(a, b, c, d, e, f)를 가지며, 좌표변환의 변환행렬을 나타내는 3×3 행렬이다. 이를 사용하면 모든 좌표계 변환을 유연하게 완료할 수 있습니다. 관심 있는 친구는 대학 분석 기하학 교과서나 SVG의 매트릭스 변경 사항에 대한 W3c의 정의 및 설명을 확인할 수 있습니다.

현재 이 5가지 변환 속성을 지원하는 브라우저에는 Safari 4+, Chrome 5+, Firefox 3.5+ 및 Opera10.5+가 포함됩니다. 모든 IE 브라우저는 이 속성을 지원하지 않습니다.