zoukankan      html  css  js  c++  java
  • css3系列之详解box-shadow

    box-shadow

    box-shadow呢 是设置元素的阴影效果的,利用这个属性,可以设计很多很炫丽的效果,不信? 等下,学完,我们就来完成下面这两个效果

     

     

      首先 先了解一下,box-shadow 的一些参数:

    box-shadow: inset 10px 10px 30px 0px #fff;

       第一个参数: 填了 inset  就是内阴影。不填就是 外阴影,

    外阴影就是 在元素底下的阴影, 内阴影是在元素里面的,出不去元素的。

     

     

       第二个参数: 向右偏移多少。负数 向左。

     

       第三个参数: 向下偏移多少。负数 向上。

     

       第四个参数: 阴影的模糊程度。 不能填负数。

     

     

       第五个参数: 向外扩展多大。在阴影的宽高外,继续加大。 如果填的是 10px  那么 是宽高都加 10px 可以填负数, 负数变小。

     

       第六个参数: 阴影的颜色。

     

      

      还有参数是可以叠加的。意思就是,你可以添加多个阴影组合,这个就看你怎么搭配了。

     

      接下来先做个小太阳:

    第一步: 小太阳是从内往外扩散的光,所以 先添加白色的外阴影。 让它看起来不那么黄。

     

    第二步,添加黄色的外阴影,继续扩散, 阴影程度加大,阴影程度加越大, 越淡。

    第三步,再继续扩散 阳光。

    完成。

     

      接下来 完成第二个:

    第一步加点白色的内阴影。 为了有一种朦胧感,不要让其他颜色太强烈

     

    第二步,加粉红色的内阴影, 向右偏移 10px 为的目的的突出 左边的 粉红色。

     

    第三步,加上相对于的 蓝色。向左偏移10px,目的是:在右边突出蓝色

     

    第四步,继续再加一层粉红色,加强一下效果。

     

    第五步,继续再加一层蓝色。

     

    第六步,加上白色的 外阴影,添加朦胧感。

     

    第七步和第八步差不多, 也是向外边框的 左右 添加粉红色和蓝色。

     

    最后,浏览器版本不同, 出现的效果也是不一样的, 自己调一下就好了

      

  • 相关阅读:
    sqlchemy self made
    scrapy 自定义图片路径保存,并存到数据库中
    关于scrapy下载文件重命名的办法以及对应url没有文件后缀的办法
    下载转码
    scrapy 下载图片 from cuiqingcai
    Scrapy框架学习
    字符串处理
    scrapy 日志处理
    sqlalchemy多对多查询
    sqlalchemy 多对多关系
  • 原文地址:https://www.cnblogs.com/yanggeng/p/11192352.html
Copyright © 2011-2022 走看看