2-3 CSS3边框 阴影 box-shadow(二)
本节编程练习不计算学习进度,请电脑登录imooc.com操作

CSS3边框 阴影 box-shadow(二)

1、阴影模糊半径阴影扩展半径的区别

阴影模糊半径:此参数可选,其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

阴影扩展半径:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

2、X轴偏移量Y轴偏移量值可以设置为负数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量为负数:

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:-4px 4px 6px #666;
}

效果图:

Y轴偏移量为负数:

.boxshadow-outset{
    width:100px;
    height:100px;
    box-shadow:4px -4px 6px #666;
}

效果图:

任务


 

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>boxshadow</title>
  6. <style>
  7. .boxshadow-outset{
  8. width:100px;
  9. height:100px;
  10. box-shadow:4px 4px 6px #666;
  11. }
  12.  
  13.  
  14. </style>
  15. </head>
  16.  
  17. <body>
  18. <h2>外阴影</h2>
  19. <div class="boxshadow-outset">
  20. </div>
  21.  
  22.  
  23. </body>
  24. </html>
下一节