1. 文本阴影
text-shadow 可分别设置偏移量、模糊度、颜色(可设透明度)。
① 水平偏移量 正值向右 负值向左
② 垂直偏移量 正值向下 负值向上
③ 模糊度 不能为负值
④ 阴影的颜色
示例代码1
<!DOCTYPE html> <html> <head> <title>设置文本阴影-单个阴影</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*② 给奇数个列表项设置阴影*/ ul>li:nth-child(odd) { /*水平方向向右移动2像素，向下移动两像素，模糊度1像素，阴影颜色为红色*/ text-shadow: 2px 2px 1px red; } </style> </head> <body> <!--① 创建一个无序列表--> <ul> <li>第1个列表项</li> <li>第2个列表项</li> <li>第3个列表项</li> <li>第4个列表项</li> <li>第5个列表项</li> <li>第6个列表项</li> <li>第7个列表项</li> <li>第8个列表项</li> </ul> </body> </html>运行结果
示例代码2
<!DOCTYPE html> <html> <head> <title>设置文本阴影-多个阴影</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*② 给奇数个列表项设置阴影*/ ul>li:nth-child(odd) { /*设置两个阴影 多个阴影之间用逗号分隔*/ text-shadow: 2px 2px 1px red, 10px 2px 1px blue; } </style> </head> <body> <!--① 创建一个无序列表--> <ul> <li>第1个列表项</li> <li>第2个列表项</li> <li>第3个列表项</li> <li>第4个列表项</li> <li>第5个列表项</li> <li>第6个列表项</li> <li>第7个列表项</li> <li>第8个列表项</li> </ul> </body> </html>运行结果
2. 边框阴影
box-shadow 可设置 水平偏移量 垂直偏移量 模糊度 阴影颜色
用法与test-shadow相同
示例代码
<!DOCTYPE html> <html> <head> <title>设置文本阴影-多个阴影</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> /*② 给盒子设置边框阴影*/ div { width: 300px; height: 300px; background-color: black; box-shadow: 10px 10px 1px red, 40px 40px 1px blue; } </style> </head> <body> <!--① 创建一个div盒子--> <div></div> </body> </html>运行结果
