您的位置:首页> 日志> 前端技术 正文
DTOP

学习css3中box-shadow的属性

NoyaHua | 2018年03月29日 |

>>收藏本文 已有 0条评论

box-shadow是一个CSS3属性,用于给HTML元素创建边框阴影效果。平时在项目中我也常用到,只是没有具体的研究过这个属性各个参数。今天主要结合案例深入学习一下

1、基础介绍

语法:box-shadow属性接收一个由5个部分组成的值

box-shadow: offset-x offset-y blur spread color position;  

offset-x  

第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的右边,而负值使阴影出现在元素的左边。  

offset-y  

第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的上边,而负值使阴影出现在元素的下边。  

blur  

第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。  

spread  

第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。  

color  

阴影的颜色  

position  

box-shadow属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影

1、案例应用  

(1) 给图片添加透明内边框  

css代码:

  1. box-shadow: 0 0 0 16px rgba(255,255,255,0.6) inset;

效果图:
  

box-shadow 属性的边界半径是通过该元素的 border-radius 属性来控制的

(2)box-shadow(和transform)属性上进行变形,我们能创造出一个元素弹出的效果。

css代码:

  1. .pop
  2. {
  3. width: 100px;
  4. height: 67px;
  5. background: url(img/img2.png) no-repeat top;
  6. transform: scale(1);
  7. box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.3);
  8. transition:transform 0.5s;
  9. }
  10. .pop:hover {
  11. transform: scale(1.3);
  12. box-shadow: 0px 0px 50px 2px rgba(0, 0, 0, 0.3);
  13. transition: transform 0.5s;
  14. }

 

(3)浮动效果
我们能在:after这样的伪元素上增加box-shadow的效果。我们能使用这个来创建出元素底部的阴影,给予元素浮起或者掉落下来的假象。

css代码:

  1. .floating
  2. {
  3. width: 100px;
  4. height: 67px;
  5. background: url(img/img2.png) no-repeat top;
  6. background-size: 100px 67px;
  7. position: relative;
  8. transform: translateY(0);
  9. transition: transform 1s;
  10. }
  11. .floating:after
  12. {
  13. content: "";
  14. display: block;
  15. position: absolute;
  16. bottom: -30px;
  17. left: 50%;
  18. height: 8px;
  19. width: 100%;
  20. box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
  21. border-radius: 50%;
  22. background-color: rgba(0, 0, 0, 0.2);
  23. transform: translate(-50%, 0);
  24. transition: transform 1s;
  25. }
  26. .floating:hover
  27. {
  28. transform: translateY(-40px);
  29. transition: transform 1s;
  30. }