text-shadow

<h3>CCS text-shadow 文字陰影效果</h3> <pre> 文字陰影 {text-shadow: 向右移動 向下移動 模糊度 陰影色 }， <span id="D1">陰影效果 </span >{ text-align: center; font-weight : bold; text-shadow:5px 5px 10px black ; } <span id="D2">字型輪廓</span>{ color: white; letter-spacing: 3px; font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black, 2px 0 0 black, 0 -2px 0 black; } <span id="D3">活動陰影</span>{ animation: mymove 5s infinite; } @keyframes mymove{10% {text-shadow:10px 10px 20px gold;} 25% {text-shadow:0px 20px 20px red; } 35% {text-shadow:-10px 10px 20px gold; } 45% {text-shadow:-10px 10px 20px orangered; } 55% {text-shadow:-10px 1px 20px orange; } 65% {text-shadow:-10px -10px 20px tomato; } 75% {text-shadow:10px -10px 20px darkorange; } 85% {text-shadow:0px -10px 20px red; } 100% {text-shadow:10px 0px 20px deeppink; } } } </pre> <style> #D1 { font-size: 30px ; text-align: center; font-weight : bold; text-shadow:5px 5px 10px black ;} #D2 { font-size: 30px ; color: white; letter-spacing: 3px; font-weight:bold ; text-shadow: -2px 0 0 black, 0 2px 0 black, 2px 0 0 black, 0 -2px 0 black;} #D3 {font-size: 30px ; animation: mymove 5s infinite; } @keyframes mymove{10% {text-shadow:10px 10px 20px gold;} 25% {text-shadow:0px 20px 20px red; } 35% {text-shadow:-10px 10px 20px gold; } 45% {text-shadow:-10px 10px 20px orangered; } 55% {text-shadow:-10px 1px 20px orange; } 65% {text-shadow:-10px -10px 20px tomato; } 75% {text-shadow:10px -10px 20px darkorange; } 85% {text-shadow:0px -10px 20px red; } 100% {text-shadow:10px 0px 20px deeppink; } } pre {font-size: 18px;} h3 { text-align: center; font-size: 30px; font-weight: bold; text-shadow: 10px 6px 10px grey; color: blue; } <style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

<div id="div1"> <pre><span id="s0"> 陰影效果</span> { font-size: 30px ; color:orange; font-weight : bold; text-shadow:5px 5px 5px navy; } <span id="s1"> 加凸文字</span> { font-size: 25px; font-weight : bold; text-shadow: -2px -2px white, 1px 1px #333; } <span id="s2"> 加凹文字</span> { font-size: 25px; font-weight : bold; text-shadow: 2px 2px white, -1px -1px #333; } <span id="s3">立體文字</span> { font-size: 50px; color:blue ; font-weight:bold ; text-align: center; text-shadow:2px 2px 2px white, 3px 3px 3px white, 4px 4px 3px white, 5px 5px 3px white, 6px 6px 6px white, 8px 7px 3px black } </pre> </div> <style> #div1 { background: #CCC; height:99%; border-style:outset;} #s0 { font-size: 30px ; color:orange; font-weight : bold; text-shadow:5px 5px 5px navy;} #s1 { font-size: 25px; //text-align:center; font-weight : bold; text-shadow: -2px -2px white, 1px 1px #333;} #s2 { font-size: 25px; font-weight : bold; text-shadow: 3px 3px white, -1px -1px #333} #s3 { font-size: 50px; color:blue ; font-weight:bold ; text-align: center; text-shadow:2px 2px 2px white, 3px 3px 3px white, 4px 4px 3px white, 5px 5px 3px white, 6px 6px 6px white, 8px 7px 3px black} pre {font-size: 18px;} </style>

預覽 寫程式 還原 LLLLLLLLLLLLLLLLL

Edit

#ccs #HTML #text-shadow #文字陰影效果 #CCS text-shadow #shadow effect