집 >웹 프론트엔드 >H5 튜토리얼 >Html5 및 CSS를 사용한 텍스트 그림자 효과 공유 예

Html5 및 CSS를 사용한 텍스트 그림자 효과 공유 예

小云云원래의: 2018-01-17 17:05:583945검색

이 글은 HTML5와 CSS를 사용하여 텍스트 그림자 효과를 얻는 방법에 대한 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이틀 전 HTML5 프론트엔드를 배우고 있는 예쁜 소녀가 저에게 텍스트 그림자 효과를 얻는 방법에 대해 물었습니다. 그녀는 텍스트 그림자에 대해서도 알고 있었지만 실제로는 CSS3의 새로운 기능이 매우 강력하다고 생각했습니다. 좋습니다. 더 이상 고민하지 말고 먼저 이 텍스트 그림자를 살펴보겠습니다.

1. 텍스트 그림자

text-shadow 텍스트 그림자 매개변수: 매개변수 1: 첫 번째 길이 값은 그림자의 수평 오프셋 값을 설정하는 데 사용됩니다. 개체. 음수일 수 있음 매개변수 2: 두 번째 길이 값은 객체 그림자의 수직 오프셋 값을 설정하는 데 사용됩니다. 음수 값일 수 있습니다. 매개변수 3: 세 번째 길이 값이 제공되면 객체의 그림자 흐림 값을 설정하는 데 사용됩니다. 음수 매개변수 4는 허용되지 않습니다: 객체의 그림자 색상을 설정합니다

text-shadow: 10px 10px 50px #000;

II. 예시

위 그림의 효과를 어떻게 얻을 수 있나요?

HTML 구조 CSS 스타일 글꼴 스타일 글꼴 색상 텍스트 그림자 그런 다음 특정 코드를 살펴보겠습니다.

HTML:

<p class="text">【千锤百炼】尚学堂</p>

CSS:

.text{
    font: bold 100px/1.5 '微软雅黑';
    color: dodgerblue;
/*文本阴影*/
    text-shadow: 10px 10px 50px #000;
    /*text-shadow: 10px 10px 50px #000,-10px -10px 50px #f00;*/
}

이제 프런트 엔드의 작은 아름다움이 미치는 효과를 살펴보겠습니다. 어떻게 해야 하는지 물어보시더라구요...

사실 아주 간단해요, 바로 코드로 들어가죠~

HTML:

<p class="text">【千锤百炼】尚学堂</p>

CSS:

body {
    background: #000;
    color: #fff;
}
.text{
    font: bold 100px/1.5 georgia, sans-serif;
/*不同颜色的,多个不同值的模糊大小*/
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
}

생각을 넓히세요. 사실 CSS3 스타일은 매우 흥미롭습니다. 때로는 약간만 변경해도 매우 멋진 효과를 얻을 수 있습니다^. ^

Html5 및 CSS를 사용한 텍스트 그림자 효과 공유 예

관련 기사