CSS3 공통 속성 컬렉션

RGBA

배경: rgba(0, 118, 160, .25);

처음 세 값은 RGB 색상 값이고 마지막 값은 가로 투명도입니다. (0 = 투명, 1 = 불투명).

RBGA는 글꼴 색상, 테두리 색상, 배경색, 그림자 색상 등 모든 색상 관련 속성에 적용할 수 있습니다.

텍스트 Shadow text-shadow (브라우저를 판단할 필요 없음)

text-shadow:2px 3px 2px #000;

text-shadow의 구조는 다음과 같은 순서로 되어 있습니다: X - 오프셋, Y - 오프셋 이동, 흐림 및 색상;

text-shadow:-2px -3px 2px rgba(0, 118, 160, .25);

세트 음수 값으로 설정하면 X - 오프셋은 그림자를 왼쪽으로 이동합니다. 오프셋 Y를 음수 값으로 설정 - 그림자를 위로 이동합니다. 색상은 RGBA 값을 사용할 수 있습니다.

text-shadow:0px 1px 0px #fff,0px -1px 0px #000;

텍스트 그림자 목록(쉼표로 구분), 1px 상단 및 하단 1px 그림자.

Box-shadow box-shadow (브라우저 결정 필요)

box-shadow의 구조는 의 구조와 동일합니다. 텍스트 그림자: 각각 X - 오프셋, Y 오프셋, 흐림 및 색상으로 표시됩니다.

-webkit-box-shadow:5px 5px 7px #333;

-moz-box-shadow:5px 5px 7ix #333;

마찬가지로 여러 그림자 스타일을 쉼표로 구분하여 정의할 수 있습니다.

moz-box-shadow:

-2px -2px 0 #fff,

2px 2px 0 #bb9595,

2px 4px 15px rgba(0 , 0, 0, .3);

box-shadow 속성에는 최대 6개의 매개변수 설정이 있습니다.

그림자 유형: 이 매개변수는 선택적 값입니다. 값이 설정되지 않은 경우 기본 투영 방법은 외부 그림자입니다. 고유 값 "inset"을 사용하면 외부 그림자가 내부 그림자로 변환됩니다. 즉, 그림자 유형이 "inset"으로 설정됩니다. , 투영은 내부 그림자가 됩니다.

X 오프셋: 해당 값은 양수 또는 음수일 수 있습니다. 그렇지 않고 값이 음수인 경우 그림자는 개체의 왼쪽에 있습니다.

Y-오프셋: 그림자의 수직 오프셋을 나타냅니다. 값은 양수일 수도 있고 음수일 수도 있습니다. 양수 값인 경우 그림자는 개체의 아래쪽에 있습니다. 그렇지 않으면 해당 값은 음수 값이며 그림자는 개체의 위쪽에 있습니다.

이 매개변수는 선택 사항입니다. , 그러나 값이 0이면 그림자에 흐림 효과가 없다는 의미입니다.

그림자 확장 반경: 이 매개변수는 선택사항이며 해당 값은 양수 또는 음수일 수 있습니다. 값이 양수이면 전체 그림자가 확장되고, 값이 예이면

그림자가 줄어듭니다. color: 이 매개변수는 선택사항입니다. 색상이 설정되지 않은 경우 브라우저는 기본 색상을 사용하지만 각 브라우저의 기본 색상은 특히 웹킷 커널에서는 무색, 즉 투명합니다. 이 매개변수는 생략하지 않는 것이 좋습니다.

Box border radius border-radius (브라우저에서 결정 필요)

border radius의 약어는 비슷합니다 패딩 및 여백 속성(예: 테두리 반경: 20픽셀)

브라우저 순서대로 테두리 반경을 렌더링하려면 WebKit 브라우저에서는 "-WebKit-"를 사용하고 Firefox에서는 "-moz-"를 사용합니다.

border-radius:20px;

-webkit-border-radius:20px;

-moz-border-radius:20px;

각 모서리마다 다른 값을 지정할 수 있습니다. Firefox와 Webkit Angular는 속성 이름이 다릅니다.

“웹킷” 작성 방법

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

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

-webkit-border-bottom-left-radius:25px;

-webkit-border-right-left-radius:45px;

"Firefox" 작성 방법

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

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

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

-moz-border-radius-bottomright:45px;

위 내용은 일반적인 CSS3 속성 모음입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www. php.cn)!