찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)

CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)

易达
易达원래의
2020-06-05 22:27:132830검색

이 글의 목표:

1. text-shadow 사용법 익히기

질문:

다음 효과를 얻으려면 순수 div+css를 사용하세요.

CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)

추가 참고 사항:

1. 총: Belive Yourself You Can

2. 텍스트 크기는 86px

3입니다. 오른쪽 텍스트와 왼쪽 텍스트 사이의 간격은 20px

4입니다. 이미지 크기와 너비는 100px

5입니다. 그림자의 이동량은 15px이고 수직 이동량은 2입니다. 흐림 효과는 20이고 색상은 #333333

구체적인 작업은 다음과 같습니다.

1 재료를 준비하고 새 이미지 디렉터리를 만듭니다. 자료는

CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)

2.index.html을 만들고 구조를 작성하는 방법은 무엇입니까? . 구조는 위쪽과 아래쪽으로 나누어져 있습니다. 위쪽에는 Belive, 다른 하나는 Yourself가 표시되지만, 텍스트에는 그림자 효과가 있습니다

2. 그림. 영어 단어 중 하나는 You이고 다른 하나는 Can입니다. 텍스트에도 그림자 효과가 있어야 합니다

분석에 따르면 다음과 같은 코드를 얻었습니다

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>

</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)" / alt="CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)" >
    </div>
</div>
</body>
</html>

3. 스타일을 작성하고 CSS 디렉터리를 만듭니다. 그 안에 index.css라는 새 파일을 만듭니다. CSS의 아이디어 분석은 다음과 같습니다.

1. .container *

Think analyze1. 스타일을 사용하면 이러한 공개 코드를 .container * 스타일에 작성할 수 있습니다.

따라서 index.css에 다음과 같이 코드를 추가하세요. 

.container *{
    padding:0;
    margin:0;
}

2. .word text

사고 분석:

1. 텍스트 크기는 86px이고 그림자 효과가 있습니다. 필요한 그림자 설정에 따라 코드는 text-shadow: 15px 2px 20px로 변환됩니다. #333333;

그래서 index.css에 추가된 코드는 다음과 같습니다

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

3. rword

아이디어 분석:

1. 요구 사항에 따라 오른쪽 텍스트와 왼쪽 텍스트 사이의 거리는 20px이므로 margin-left: 20px이므로 색인에 코드를 추가합니다. CSS는 다음과 같습니다 

.rword{
     margin-left:20px;
}

4. 이미지 설정

분석을 생각해보세요:

1. 요구 사항에 따라 너비 = 100px이고 왼쪽 텍스트 사이의 거리는 10px

입니다. index.css는 다음과 같습니다

.bottom img{
    margin-left:10px;
    width:100px;
}

지금까지 index.css의 전체 내용은 다음과 같습니다.

.container *{
    padding:0;
    margin:0;
}

.word{
    font-size: 86px;
    text-shadow: 15px 2px 20px #333333;
}

.rword{
    margin-left:20px;
}
.bottom img{
    margin-left:10px;
    width:100px;
}

다음으로 index.html에 index.css를 도입합니다

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>text-shadow实现文字阴影</title>
<link rel="stylesheet" href="css/index.css" />
</head> 
<body>
<div class="container">
    <div class="top">
        <strong class="word">Belive</strong>
        <strong class="word rword">Yourself</strong>
    </div>
    <div class="bottom">
        <strong class="word">You</strong>
        <strong class="word rword">Can</strong>
        <img  src="images/CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)" / alt="CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)" >
    </div>
</div>
</body>
</html>

실행 결과는 다음과 같습니다

지금까지 모든 요구 사항을 충족했습니다.

요약:

1. 학습된 text-shadow 사용법, 주요 형식은 다음과 같습니다. text-shadow: 수평 오프셋 수직 오프셋 흐림 색상

오프셋은 양수 또는 음수일 수 있습니다. 양수는 수평으로 왼쪽 또는 수직으로 아래쪽을 의미하고 음수는 그 반대를 의미합니다CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)이 기사가 도움이 되기를 바랍니다. 모두에게 도움이 될 것입니다. 감사합니다! ! !

위 내용은 CSS3의 텍스트 그림자는 텍스트 그림자 효과를 구현합니다(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).다음 기사：CSS3의 텍스트 오버플로는 줄임표가 있는 기사 제목의 표시 효과를 구현합니다(코드 예).

관련 기사

더보기