일반적으로 사용되는 10가지 CSS3 지식 공유

시대의 발전에 따라 사용자 경험을 개선하고 작업 효율성을 높이기 위한 목적으로 프런트엔드 지식이 업데이트되었습니다. CSS3의 출현으로 우리는 간단한 방법으로 더 멋진 효과를 만들 수 있습니다. 직장에서 일반적으로 사용되는 10가지 CSS3 속성을 참고해 보세요.

1. 텍스트 효과

그림자: X 오프셋 Y 오프셋 흐림 정도 그림자 색상; 텍스트 그림자: 5px 5px 5px #FF0000; 텍스트 오버플로: 줄임표; nowrap;

2.Font

@font-face { 글꼴 패밀리: 글꼴 이름; src: 서버에 있는 글꼴 파일의 상대 또는 절대 경로;}
Call: 글꼴 가족: 글꼴 이름;

3 , 3D 변형

변위:translate3d(x,y,z),translateZ(z)스케일:scale3d(x,y,z),scaleZ(z)회전:rotate3d(x,y,z,angle),rotateZ(angle )

4. 다중 열 레이아웃

다중 열 레이아웃 열: (열 너비) || (열 개수); 자동 | 열 간격 열 간격: 일반 || (길이) 목록 테두리 열 규칙: (열-규칙-너비)|(열-규칙-스타일)|(열-규칙-색상) 열 간 설정 열 범위: 없음 | 모두

상자 크기: 콘텐츠 상자 | 테두리 상자 | 상속

크기 조정: 없음 | 세로 | -webkit - (chrome 및 Safari), -moz- (firefox), -ms- (IE), -o- (opera)

8, border

둥근 모서리: border-radius: 5px 4px 3px 2px /* 시계 방향 */

Shadow: box-shadow: X축 오프셋 Y축 오프셋

[그림자 흐림 반경] [그림자 확장 반경] [그림자 색상] [투영 방법];

/* 기본 외부 그림자*/외부 그림자: 상자 -shadow:4px 2px 6px #333333;

Inset 그림자: box-shadow:4px 2px 6px #333333 inset;

다중 그림자: box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 삽입;

테두리 이미지: border-image: 이미지 경로 픽셀 시계 방향 확장 방법(반복 반복

타일 늘이기) border-image:url(border.png) 30 30 round; .png) 30 30 라운드; /* Safari 5 이상 */ -o-border-image:url(border.png) 30 30 라운드 /* Opera */

9、Background

크기: background-size: 자동 | | 표지 포함: 배경-원본: 테두리 상자 | 콘텐츠 상자;

클립: 배경 클립: 테두리 상자 | 콘텐츠 상자 | 클립 없음 여러 배경: 배경: [배경 색상] |
[배경 위치][/배경 크기] | [배경 반복] |
[배경 첨부] | [배경-클립] | [배경-원본],...

[예] 배경:url(logoindex.png) 반복 없음 왼쪽 상단/75% 50%, url(logoindex.png) 반복 없음 오른쪽 하단/ 50% 45%;

10. Gradient

선형 그래디언트: //기본값은 위에서 아래로, 방향과 각도는 변경될 수 있습니다.

background: -webkit-linear-gradient(red, blue) /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue) /* Firefox 3.6 - 15 */ 배경 : 선형-그라디언트(red, blue); /* 표준 구문*/
방사형 그라데이션: background: -webkit-radial-gradient(red, green, blue) /* Safari 5.1 - 6.0 */ background: -o-radial -gradient(red, green, blue); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(red, green, blue) /* Firefox 3.6 - 15 */ background: Radial-gradient(red, 녹색, 파란색) /* 표준 구문*/

위 내용은 일반적으로 사용되는 10가지 CSS3 지식 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!