css3_box-shadow使用记录

1、box-shadow这个属性有6个参数可设置，使用的时候比较少用，每次使用的时候都会忘记，故写此文作记录。

样式：

1 /*1.添加此属性添加阴影*/
2 box-shadow: 0 0 10px 10px blue;
3 /*box-shadow: h-shadow v-shadow blur spread color inset;*/
4 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离  4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/

 

全部代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 height: 100px;
 9                 width: 100px;
10                 border: 2px solid black;    
11                 
12                 /*1.添加此属性添加阴影*/
13                 box-shadow: 0 0 10px 10px blue;
14                 /*box-shadow: h-shadow v-shadow blur spread color inset;*/
15                 /*三个参数:1.垂直距离 2.水平距离 3.模糊距离  4.阴影的尺寸 5.阴影颜色 6.将外部阴影 (outset) 改为内部阴影。*/
16                 
17                 
18                 
19                 margin: 100px auto;
20             }
21         </style>
22     </head>
23     <body>
24         <div id="box"></div>
25     </body>
26 </html>
View Code

 

实现如下的效果图：

 

posted @ 2018-03-26 17:48  幽谷兰花  阅读(122)  评论(0)  编辑  收藏  举报