box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影；
默认情况下，盒子阴影使用外阴影；
通常情况下，使用阴影属性只要使用水平偏移、垂直偏移与模糊度；
如果不设置颜色，阴影的颜色与内容颜色相同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: 0; } .c1 { height: 200px; width: 200px; background-color: red; margin: 100px auto; text-align: center; line-height: 200px; box-shadow: 10px 10px 20px 0 blue; } .c2 { height: 200px; width: 200px; background-color: red; margin: 100px auto; text-align: center; line-height: 200px; box-shadow: 10px 10px 20px 5px inset; } </style> </head> <body> <div class="c1">外阴影</div> <div class="c2">内阴影</div> </body> </html>
text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色；
通常情况下，使用阴影属性只要使用水平偏移、垂直偏移与模糊度；
如果不设置颜色，阴影的颜色与内容颜色相同。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>标题</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 200px; margin: 200px auto; background-color: yellow; text-align: center; line-height: 200px; font-size: 40px; text-shadow: 10px 10px 20px blue; } </style> </head> <body> <div>文字阴影</div> </body> </html>