CSS2의 text-shadow 속성을 사용하면 웹 페이지의 텍스트에 그림자를 쉽게 추가할 수 있지만 지금까지는 OS X의 Safari에서만 지원됩니다. 오늘은 Firefox를 포함한 다른 브라우저에 대한 CSS 텍스트 그림자 효과를 만들겠습니다. w3 검증을 통과하세요.
수년간 논의된 text-shadow 속성을 사용하면 페이지 요소의 그림자 색상, 오프셋 및 흐림을 제어할 수 있습니다. 아직 널리 지원되지는 않지만 일부 디자이너는 CSS 텍스트를 사용하기로 결정하기 시작했습니다. 모든 곳에 그림자 속성이 있습니다. 이는 소수의 사용자를 위한 기능을 향상시키기 위한 목적으로만 설계되었습니다.
다음은 사용시 a의 위치:relative와 위치:absoluteview plaincopy toclipboardprint?에 주의하세요.
<스타일>
ul,li{ 여백:0px; 패딩:0px;목록 스타일 유형: 없음;}
#nav{글꼴-가족: Verdana, "宋体", Arial;}
#nav li{ float:왼쪽 여백:30px;}
#nav 범위{display:none;}
#nav a{글꼴 크기:12px;글꼴 무게: 굵게;색상: #FF6600;텍스트 장식: 없음;
#nav a:hover{ 색상:#999;상단:1px; 왼쪽:1px;
#nav a:hover 범위{ 디스플레이:블록; 왼쪽:-2px; 색상:#FF3300;cursor:pointer;}
</스타일>
<스타일>
ul,li{ 여백:0px; 패딩:0px;목록 스타일 유형: 없음;}
#nav{글꼴-가족: Verdana, "宋体", Arial;}
#nav li{ float:왼쪽 여백:30px;}
#nav 범위{display:none;}
#nav a{글꼴 크기:12px;글꼴 무게: 굵게;색상: #FF6600;텍스트 장식: 없음;
#nav a:hover{ 색상:#999;상단:1px; 왼쪽:1px;
#nav a:hover 범위{ 디스플레이:블록; 왼쪽:-2px; 색상:#FF3300;cursor:pointer;}
</style>일반 사본을 클립보드 인쇄로 보시겠습니까?
<div id="nav">
<ul>
<li><a href="#">웹사이트 홈페이지<span>웹사이트 홈페이지</span></a></li>
<li><a href="#">웹사이트 홈페이지<span>웹사이트 홈페이지</span></a></li>
<li><a href="#">웹사이트 홈페이지<span>웹사이트 홈페이지</span></a></li>
<li><a href="#">웹사이트 홈페이지<span>웹사이트 홈페이지</span></a></li>
<li><a href="#">웹사이트 홈페이지<span>웹사이트 홈페이지</span></a></li>
</ul>
</div>