CSS（十九）：盒子阴影、文字阴影
盒子阴影
box-shadow属性为可以设置
盒子阴影
-
语法
box-shadow: h-shadow v-shadow blur spread color inset; -
说明
属性值 说明 h-shadow 必须。水平阴影的位置。允许负值 v-shadow 必须。垂直阴影的位置。允许负值 blur 可选。模糊距离 spread 可选。阴影的尺寸 color 可选。阴影的颜色 inset 可选。将外部阴影(outset)改为内部阴影 -
注意：
- 默认的阴影是外阴影(outset)，但是不可以写，否则导致阴影无效
- 盒子阴影不占用空间，不会影响其他盒子排列
-
示例：当鼠标经过盒子时设置阴影
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>盒子阴影</title> <style> div { width: 300px; height: 200px; background-color: purple; /* box-shadow: 10px 10px 10px 10px black; */ /* box-shadow: 10px 10px 10px 10px black inset; */ } div:hover { box-shadow: 10px 10px 10px 10px #ccc; } </style> </head> <body> <div></div> </body> </html>
文字阴影
text-shadow属性为可以设置
文字阴影
-
语法
text-shadow: h-shadow v-shadow blur color; -
说明
属性值 说明 h-shadow 必须。水平阴影的位置。允许负值 v-shadow 必须。垂直阴影的位置。允许负值 blur 可选。模糊距离 color 可选。阴影的颜色 -
示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文字阴影</title> <style> div { font-size: 50px; color: purple ; text-shadow: 5px 5px 5px #ccc; } </style> </head> <body> <div> 文字阴影 </div> </body> </html>
