CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)
- 藏色散人원래의
- 2018-08-10 16:27:035500검색
이 글에서는 아름다운 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 글꼴 그림자 효과 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>위 코드의 효과는 다음과 같습니다.
참고: 모든 주요 브라우저는 text-shadow 속성을 지원합니다. Internet Explorer 9 및 이전 브라우저는 text-shadow 속성을 지원하지 않습니다.
text-shadow 속성은 텍스트에 하나 이상의 그림자를 추가합니다. 이 속성은 쉼표로 구분된 음영 목록으로, 각 음영은 2~3개의 길이 값과 선택적 색상 값으로 지정됩니다. 생략된 길이는 0입니다.
해당 속성에 가능한 값:
v-shadow 필수입니다. 수직 그림자의 위치입니다. 음수 값이 허용됩니다.
흐림 선택사항. 흐린 거리.
색상 선택사항. 그림자의 색상입니다.
위 내용은 CSS 속성을 사용하여 글꼴 그림자 효과를 얻는 방법은 무엇입니까? (코드 데모)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.