CSS實現文字的邊框效果<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><title>Cross-Browser Text Glow Demo</title> <mce:style type="text/css"><!-- * { font-family:Arial,Helvetica,sans-serif; font-size:16px; } div { position:absolute; top:20px; left:20px; padding:0; color:#000; z-index:3; } #d2, #d3, #d4, #d5, #d6, #d7 {color:#fd6;} #d8, #d9, #d10, #d11, #d12, #d13 {color:#ffa;} .top {color:#fff;} #d2 { top:19px; left:19px; z-index:2; } #d3 { top:21px; left:21px; z-index:2; } #d4 { top:19px; left:21px; z-index:2; } #d5 { top:21px; left:19px; z-index:2; } #d6 { top:19px; z-index:2; } #d7 { top:21px; z-index:2; } #d8 { top:18px; left:18px; z-index:1; } #d9 { top:22px; left:22px; z-index:1; } #d10 { top:18px; left:22px; z-index:1; } #d11 { top:22px; left:18px; z-index:1; } #d12 { top:18px; z-index:1; } #d13 { top:22px; z-index:1; } --></mce:style><style type="text/css" mce_bogus="1">* { font-family:Arial,Helvetica,sans-serif; font-size:16px; } div { position:absolute; top:20px; left:20px; padding:0; color:#000; z-index:3; } #d2, #d3, #d4, #d5, #d6, #d7 {color:#fd6;} #d8, #d9, #d10, #d11, #d12, #d13 {color:#ffa;} .top {color:#fff;} #d2 { top:19px; left:19px; z-index:2; } #d3 { top:21px; left:21px; z-index:2; } #d4 { top:19px; left:21px; z-index:2; } #d5 { top:21px; left:19px; z-index:2; } #d6 { top:19px; z-index:2; } #d7 { top:21px; z-index:2; } #d8 { top:18px; left:18px; z-index:1; } #d9 { top:22px; left:22px; z-index:1; } #d10 { top:18px; left:22px; z-index:1; } #d11 { top:22px; left:18px; z-index:1; } #d12 { top:18px; z-index:1; } #d13 { top:22px; z-index:1; }</style></head><body> <div id="d1">CSS實現文字的邊框效果</div> <div id="d2">CSS實現文字的邊框效果</div> <div id="d3">CSS實現文字的邊框效果</div> </body></html>