box-shadow 阴影剖析
box-shadow的四个值分别是左右偏移,上下偏移,向四周模糊扩算,距离四周边缘的距离,最后一个是阴影的颜色值,如图示例:
上代码,复制代码,就可以看到上图的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>box-shdow-text</title> <style type="text/css"> div{ width: 100px; height: 100px; background: green; display: inline-block; margin: 30px; } .div1{ box-shadow: 10px 0 0 0 #000; } .div2{ box-shadow: 0 10px 0 0 #000; } .div3{ box-shadow: 0 0 10px 0 #000; } .div4{ box-shadow: 0 0 0 10px #000; } .div1,.div2,.div3,.div4{ } .div5{ box-shadow: 0 0 10px 30px #000; } .div6{ box-shadow: -3px 3px 10px 5px #000; } .div7{ box-shadow: inset 0 0 10px 0 #0cc; background: none; } .div8{ box-shadow: 0 0 0 5px #000,0 0 0 10px #999,0 0 0 15px #666; } </style> </head> <body> <div class="div1">左右偏移</div> <div class="div2">上下偏移</div> <div class="div3">向四周模糊扩散的</div> <div class="div4">四周阴影的距离</div> <div class="div5">配合起来看效果</div> <div class="div6">配合起来看效果</div> <div class="div7">阴影向内</div> <div class="div8">阴影叠加</div> </body> </html>
如有错误,请在评论中指出,感激不尽
欢迎加入前端开发交流群qq:143206839