이틀 전, HTML5 프론트엔드를 배우고 있는 한 예쁜 소녀가 나에게 텍스트 그림자 효과를 얻는 방법에 대해 물었습니다. 그녀는 텍스트 그림자에 대해서도 알고 있었지만 실제로는 CSS3의 새로운 기능이 매우 강력하다고 생각했습니다. 좋습니다. 더 이상 고민하지 말고 먼저 이 텍스트 그림자를 살펴보겠습니다.
1. 텍스트 그림자text-shadow 텍스트 그림자 매개변수: 매개변수 1: 첫 번째 길이 값은 객체 그림자의 수평 오프셋 값을 설정하는 데 사용됩니다. 음수일 수 있음 매개변수 2: 두 번째 길이 값은 객체 그림자의 수직 오프셋 값을 설정하는 데 사용됩니다. 음수일 수 있음 매개변수 3: 세 번째 길이 값이 제공되면 객체의 그림자 흐림 값을 설정하는 데 사용됩니다. 음수값은 허용되지 않습니다. 매개변수 4: 개체의 그림자 색상을 설정합니다.
텍스트 그림자: 10px 10px 50px #000;
2. 예시위 그림의 효과를 어떻게 얻을 수 있나요?
HTML 구조 CSS 스타일 글꼴 스타일 글꼴 색상 텍스트 그림자 그런 다음 특정 코드를 살펴보겠습니다.
HTML:
<div class=text>[천가지의 성질] 상설탕</div>
CSS:
.text{ 글꼴: 굵은 글씨 100px/1.5 'Microsoft Yahei'; 색상: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10픽셀 50픽셀 #f00;*/}이제 프론트 엔드에서 나에게 묻는 작은 아름다움의 효과를 어떻게 수행하는지 살펴 보겠습니다..
실제로는 매우 간단합니다. 바로 코드로 가보겠습니다~
HTML:
<div class=text>[천가지의 성질] 상설탕</div>
CSS:
body { 배경: #000; 색상: #fff;}.text{ 글꼴: 굵은 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를 사용하는 편집자의 소개입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드릴 것입니다. 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!