CSS3의 공통 속성 소개

RGBA

background：rgba(0, 118, 160, .25);

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

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

텍스트 그림자 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개의 매개변수 설정이 있습니다.

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

X-오프셋: 그림자의 수평 오프셋을 나타냅니다. 해당 값은 양수이거나 음수일 수 있으며, 그렇지 않은 경우 그림자는 개체의 오른쪽에 있습니다. 음수이면 그림자가 개체의 왼쪽에 있습니다.

Y 오프셋: 해당 값은 양수 또는 음수일 수도 있습니다. ;

그림자 흐림 반경: 이 매개변수는 선택사항이지만 값은 양수일 수 있습니다. 값이 0이면 그림자에 흐림 효과가 없다는 의미입니다. 값이 클수록 그림자의 가장자리가 더 작아집니다.

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

그림자 색상: 이 매개변수는 선택 사항입니다. 색상이 설정되지 않은 경우 브라우저는 기본 색상을 사용하지만 각 브라우저의 기본 색상은 다릅니다. 특히 웹킷 커널 아래의 Safari 및 Chrome 브라우저는 무색입니다. 즉, 이 매개변수를 생략하지 않는 것이 좋습니다. .

Box border radius border-radius (브라우저를 결정해야 함)

border radius의 약어는

Padding 및 여백 속성(예: 테두리 반경: 20픽셀) 브라우저 순서대로 테두리 반경을 렌더링하려면 WebKit 브라우저에서는 "-WebKit-"를 사용하고 Firefox에서는 "-moz-"를 사용합니다.

border-radius:20px;
-webkit-border-radius:20px;
-moz-border-radius:20px;

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

“Webkit” 작성법

-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 중국어 웹사이트의 기타 관련 기사를 참조하세요!