1. 向外阴影 box-shadow:0 0 30px #F30;
/* x轴阴影 y轴阴影 羽化值 阴影颜色 */
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; box-shadow:0 0 30px #F30;} </style> </head> <body> <div class="test"> box-shadow </div> </body> </html>
2. 向内阴影 box-shadow:0 0 30px #F30 inset;
/* x轴阴影 y轴阴影 羽化值 阴影颜色 向内阴影*/
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; box-shadow:0 0 30px #F30 inset;} </style> </head> <body> <div class="test"> box-shadow </div> </body> </html>
3. 内部内容阴影 text-shadow:0 0 30px #F30;
/* x轴阴影 y轴阴影 羽化值 阴影颜色 */
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> .test{height:200px; width:400px; border:1px solid #ccc; color:#0F6; font-size:40px; text-align:center; line-height:100px; font-weight:bold; margin:100px 0 0 100px; text-shadow:0 0 30px #F30;} </style> </head> <body> <div class="test"> box-shadow </div> </body> </html>