CSS 그라데이션 색상, 생략 표시, 내장 글꼴 및 텍스트 그림자에 대한 자세한 소개

CSS3 그래디언트는 선형 그래디언트(선형)와 방사형 그래디언트(방사형)로 구분됩니다. 렌더링 엔진마다 그라디언트를 구현하는 구문이 다르기 때문에 여기서는 선형 그라디언트의 W3C 표준 구문을 기반으로 사용법만 분석합니다. 나머지는 관련 정보를 참조할 수 있습니다. W3C 구문은 IE10+, Firefox19.0+, Chrome26.0+ 및 Opera12.1+와 같은 브라우저에서 지원되었습니다.

이 섹션에서는 선형 그래디언트에 대해 살펴보겠습니다.

매개변수:

첫 번째 매개변수: 그래디언트 방향을 지정합니다. "angle" 또는 "English"라는 키워드로 나타낼 수 있습니다:

(이미지를 클릭하면 확대됩니다.)

첫 번째 매개변수가 생략되면 기본값은 "180deg"이며 이는 "아래로"와 동일합니다.

두 번째와 세 번째 매개변수는 색상의 시작점과 끝점을 나타내며, 여러 색상 값을 가질 수 있습니다.

background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

렌더링:

2. text-overflow 및 word-wrap

text-overflow는 텍스트 오버플로 사용 여부를 설정하는 데 사용됩니다. 생략 Marker(...)는 개체 내 텍스트의 오버플로를 표시합니다.

문법:

그러나 text-overflow는 텍스트가 오버플로될 때 텍스트를 표시하는 방법을 설명하는 데에만 사용됩니다. 오버플로되는 경우 강제로 텍스트를 한 줄에 표시하고(white-space:nowrap) 오버플로 내용을 숨기도록(overflow:hidden) 정의해야 합니다. 이 방법을 통해서만 오버플로 텍스트에 줄임표를 표시하는 효과를 얻을 수 있습니다. 코드는 다음과 같습니다:

text-overflow:ellipsis ; Overflow:hidden;

동시에 word-wrap을 사용하여 설정할 수도 있습니다. 텍스트 동작, 지정된 컨테이너의 경계를 초과할 때 현재 줄을 나눌지 여부.

구문:

normal은 브라우저 기본값이고, break-word는 긴 단어나 URL 주소 안에 포함되도록 설정되어 있으며, 이 속성은 일반적으로 사용되지 않습니다. , 브라우저 기본값이면 충분합니다.

3. 글꼴 포함 @font-face

@font-face는 서버 측 글꼴 파일을 로드하여 브라우저가 사용자 컴퓨터에 설치되지 않은 글꼴을 표시할 수 있도록 합니다.

구문:

@font-face {
글꼴 계열: 글꼴 이름;
src: 서버에 있는 글꼴 파일의 상대 또는 절대 경로;
}

이렇게 설정한 후 일반 글꼴을 사용하는 것과 마찬가지로 (font-*)에서 글꼴 스타일을 설정할 수 있습니다.

예:

p {
font-size:12px;
font-family: "My Font";
/*필수, @font-face 설정 */
}

4. Text Shadow text-shadow

text-shadow의 글꼴 계열 값과 동일하게 텍스트의 그림자 효과를 설정할 수 있습니다.

구문:

text-shadow: X-Offset Y-Offset 흐림 색상, 그렇지 않으면 왼쪽으로 오프셋

Y-Offset: 수직 오프셋 거리를 나타냅니다. 그림자의 값이 양수이면 그림자는 아래쪽으로 오프셋되고, 그렇지 않으면 위쪽으로 오프셋됩니다.

흐림: 값이 클수록 음수가 될 수 없습니다. , 그림자가 흐려질수록 그림자가 더 선명해집니다. 그림자 흐림이 필요하지 않은 경우 흐림 값을 0으로 설정할 수 있습니다.

색상: 그림자의 색상을 나타냅니다. RGBA 색상을 사용하세요.

예를 들어 다음 코드를 사용하여 그림자 효과를 설정할 수 있습니다.

text-shadow: 0 1px 1px #fff

위 글은 CSS 그래디언트 색상 생략 표시에 대한 포괄적인 이해를 가지고 있습니다. 내장된 글꼴 텍스트 섀도우는 모두 편집자가 공유한 내용이길 바랍니다. 당신에게 참고자료를 줄 수 있으며, 모두가 PHP 중국어 웹사이트를 지지해주기를 바랍니다.

CSS 그라데이션 색상, 생략된 태그, 삽입된 글꼴, 텍스트 그림자에 대한 자세한 내용은 PHP 중국어 웹사이트의 관련 기사를 참고하세요!

관련 기사:

HTML5 캔버스: 그라데이션 색상 그리기

css 버튼 그라데이션 색상

div+css 배경 그라데이션 색상 코드 예시