CSS3을 사용하여 글꼴 내부 광선 효과를 얻는 방법(자세한 설명)
- 坏嘻嘻원래의
- 2018-09-28 10:54:117404검색
인터넷이 나날이 발전하는 현대 사회에서 사람들은 웹 사용자 경험에 대한 요구가 점점 더 높아지고 있으며, 이로 인해 그림자 효과, 글로우 효과 등과 같은 특수 효과의 파생물이 더 많아지고 있습니다. 이 글에서는 소개하겠습니다. CSS3는 특정 참조 가치가 있는 글꼴 조명의 특수 효과를 달성하므로 도움이 필요할 수 있습니다.
css3를 사용하여 글꼴 빛나는 효과의 원리 달성
먼저 특수 효과를 추가해야 하는 텍스트를 입력해야 합니다.
-
그럼 우리가 이해해야 할 것은 CSS3 자체에는 발광 효과 속성이 없지만 text-shadow 속성을 통해 발광 효과를 얻을 수 있으므로 이제 text-shadow 속성에 집중하겠습니다.
text-shadow 속성의 기본 구문: text-shadow: h-shadow v-shadow 흐림 색상
h-shadow: 수평 그림자의 위치(수평 오프셋) 그림자), 이는 음수 값일 수 있습니다. v-shadow: 수직 그림자의 위치(그림자의 수직 오프셋). 음수 값일 수 있습니다.
blur: 그림자 흐림 거리(기본값은 0).
color: 그림자 색상, 일반적으로 글꼴 색상이 기본값입니다.
또한 텍스트 그림자의 또 다른 기능인 여러 그림자를 동시에 설정하는 기능도 사용할 수 있습니다(여러 그림자를 구분하려면 쉼표를 사용하세요). 이 기능은 현재로서는 많이 소개되지 않을 것입니다.
글꼴 빛나는 효과를 얻기 위해 CSS3를 사용한 예
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>发光字体</title>
<style type="text/css">p{color:#0F9;font-size:36px;text-align:center;transition:all 0.1s;
text-shadow:1px 1px 1px #00FF00;}
p:hover{ text-shadow:6px 6px 6px #00FF00;}
</style>
</head>
<body><p align="center">PHP中文网</p>
</body>
</html>글꼴 빛나는 효과는 그림과 같습니다
위 내용은 CSS3을 사용하여 글꼴 내부 광선 효과를 얻는 방법(자세한 설명)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!