CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)-CSS 튜토리얼-php.cn

CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)

藏色散人

풀어 주다： 2018-08-10 16:27:03

원래의

5522명이 탐색했습니다.

이 글에서는 아름다운 CSS 글꼴 스타일의 효과를 소개합니다. 도움이 필요한 사람들에게 도움이 되기를 바랍니다.

CSS 글꼴 그림자 효과 1의 구체적인 코드 예시는 다음과 같습니다.

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3.a {text-shadow: 0.1em 0.1em 0.05em #333
 }
        h3.b {text-shadow: 0.1em 0.1em 0.2em black}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>

로그인 후 복사

위 코드의 효과는 다음과 같습니다.

CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)

CSS 글꼴 그림자 효과 2의 구체적인 코드 예시는 다음과 같습니다. :

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>css字体阴影测试一</title>
    <meta charset="UTF-8">
    <style type="text/css">
        h3{color: #1b5c16;}
        h3.a {text-shadow: -1px -1px white, 1px 1px #333}
        h3.b {text-shadow: 1px 1px white, -1px -1px #444}
    </style>
</head>
<body>
<h3 class="a">css好看的字体样式之阴影效果</h3>
<h3 class="b">css好看的字体样式之阴影效果</h3>
</body>
</html>

로그인 후 복사

위 코드의 효과는 다음과 같습니다.

CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)