css - box-shadow

weixin_33991727

于 2018-09-06 10:33:00 发布

阅读量75

点赞数

本文详细介绍如何使用 CSS 的 box-shadow 属性来实现元素的阴影效果，并通过具体示例展示了如何调整阴影的位置、模糊程度、扩展范围及颜色等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <style>
10         h1 {
11             /* 
12             box-shadow:0px 0px 1px #000
13 
14             box-shadow: 0(左右边框阴影 为1px,第1个值为正整数左边框阴影,第1个值为负整数 代表 右边框阴影) 0(第2个值为0 代表上下边框阴影, 第2个值为正整数 代表1px阴影距离上边框多少,第1个值为负整数 代表下边框阴影设置) 
15             10px(指阴影程度) inset(内阴影，不填写则外阴影)
16              */
17             box-shadow: 0 0 10px #000 inset;
18             width: 80px;
19             height: 80px;
20         }
21     </style>
22 </head>
23 
24 <body>
25     <h1></h1>
26 </body>
27 
28 </html>

1         /*
2             blur:模糊半径
3             spread:颜色
4         */
5         box-shadow: 0 0 10px #f00 inset;
6         box-shadow: h-shadow v-shadow blur spread color inset;