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>
实现如下的效果图: