CSS의 텍스트 수정 관련 팁-CSS 튜토리얼-php.cn

CSS의 텍스트 수정 관련 팁

零下一度

풀어 주다： 2017-06-29 15:55:26

원래의

1458명이 탐색했습니다.

이 글에서는 주로 텍스트 수정과 관련된 몇 가지 기술을 소개합니다. 여기서는 주로 text-designation 및 text-shadow 두 가지 속성으로 시작합니다. 기사에서는 샘플 코드를 통해 자세히 소개합니다.

이 글은 주로 CSS 텍스트 장식에 관한 정보를 소개합니다. 모두의 참고와 학습을 위해 공유합니다. 자세한 소개를 살펴보겠습니다.

1. 누구나 익숙할 거라 믿습니다. with text-designation 이 속성은 낯설지 않습니다. a 태그의 기본 스타일을 재설정할 때 다음과 같이 작성하는 경우가 많습니다. 선, 스타일, 색상으로 구성됩니다. 이 효과를 얻을 수 있습니다:

밑줄 노란색 점선

안타깝게도 줄에는 밑줄(밑줄), 윗줄(윗줄) 및 줄바꿈(취소선)만 있습니다. 갑자기 물결표에 밑줄을 긋고 싶다면 어떻게 해야 할까요? 걱정하지 마세요. CSS의 마법이 여러분을 대신해 도와줄 것입니다. 먼저 그라데이션을 사용하는 방법을 알아야 합니다. 렌더링부터 시작하겠습니다.

텍스트 물결선을 구현하는 그라데이션

여기서 아이디어에 대해 먼저 이야기해 보겠습니다. 먼저 기본 요소 'X'를 구성하기 위해 두 개의 그라데이션을 사용해야 합니다(그림은 표시하지 않겠습니다). 여기), 아래 첫 번째 단계가 더 중요합니다. 'X'의 위쪽 부분을 가로채서 'V'를 얻어야 합니다. 이를 반복과 결합하여 물결 모양의 선을 만들 수 있습니다. 다음은 나중에 사용할 수 있도록 scss로 작성된 믹스인입니다.

    @mixin waveline($color,$h) {
        position: relative;
        &::after {
            content: &#39;&#39;;
            display: block;
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            height: $h;
            background: linear-gradient(135deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%),
                        linear-gradient(45deg, transparent, transparent 45%, $color, transparent 55%, transparent 100%);
            background-size: $h * 2 $h * 2;
        }
    }

로그인 후 복사

2. text-shadow

text-shadow는 box-shadow와 거의 동일하므로 여러 개의 그림자를 생성할 수 있습니다. 응용 프로그램:

1. 텍스트의 3D 효과

이 3D는 다음 렌더링도 사용합니다.

text-shadow는 3D 효과를 구현합니다.

    @mixin threeDText($color) {
        text-shadow: 1px 1px $color, 2px 2px $color,
                     3px 3px $color, 4px 4px $color,
                     5px 5px $color, 6px 6px $color,
                     7px 7px $color, 8px 8px $color;
    }

로그인 후 복사

다음은 몇 가지 색상입니다. 적절하게 조정하면 효과가 더 좋아질 것입니다.

2. 텍스트 획 효과

다음 렌더링:

text-shadow는 텍스트 획 효과를 구현합니다.

    @mixin strokeText($w, $color) {
        text-shadow: $w 0 0 $color,
                     -$w 0 0 $color,
                     0 $w 0 $color,
                     0 -$w 0 $color;
    }

로그인 후 복사

사실 여기의 효과는 그다지 좋지는 않지만 우리를 놀라게 할 수 있습니다. 작은 속성, 큰 사용법.

위 내용은 CSS의 텍스트 수정 관련 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!