zoukankan      html  css  js  c++  java
  • CSS盒子阴影

      在一些常见的网站,我们把鼠标移动到盒子,盒子下方就会浮现阴影

      在CSS3中,我们可以使用box-shadow属性为盒子增加阴影

      属性值如下:

     

       我们实操一下,首先先准备一个盒子

      首先是前两个参数,代表阴影在xy轴的位置,我们先看 0 0会是什么效果

      可以看到阴影整齐地出现在盒子的外围,通过调整第一第二个参数我们可以调整阴影的位置,需要注意x轴右为正,y轴下为正

       向右10px,向下10px,效果:

       我们再来看第三个参数,阴影模糊的距离,为0的时候,我们可以看到阴影是纯黑的

      我们逐渐把第三个值调大,我们可以看到阴影越来越模糊

      第四个参数就是阴影的尺寸,这个很好理解,值越大阴影越大,值越小阴影越小

      第五个值是颜色,我们一般使用rgb 0 0 0 0.3 代表百分之30的黑色,这样就非常好看

      需要注意的是盒子阴影是不占位置的,不会对其他盒子进行挤压

      如果我们想实现鼠标放上去产生阴影的效果,我们就选用hover即可

     

  • 相关阅读:
    Python day43 :pymysql模块/查询,插入,删除操作/SQL注入完全问题/事务/模拟登录注册服务器/视图/函数/存储过程
    docker
    Linux 05
    Linux04
    Linux 03
    Linux 02
    go语言
    go语言
    go语言
    Linux
  • 原文地址:https://www.cnblogs.com/qq2210446939/p/13969488.html
Copyright © 2011-2022 走看看