关于box-shadow属性的一点心得

  一般我用到box-shadow都是用于诸如按钮,文本块,某些图标,css类似为:

box-shadow: 1px 1px 5px rgba(0, 0, 0, .8);

  这样,样式看上去会更加柔和,或者增加了立体感。

  我个人的理解上,box-shadow的本质就是本体的形状的复制。

  因此,当我们要给样式增加立体感的时候,就可以做的更加逼真。

HTML: <div class="box shadow"></div>
CSS:

    .box {
       width: 300px;
        height: 100px;
      background: #ccc;
      border-radius: 10px;       

      margin: 10px;    

    }  

    .shadow1::before,
    .shadow1::after {
      content:"";
      position:absolute;
      z-index:-1;
      bottom:15px;
      left:10px;
      width:50%;
      height:20%;
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
      transform:rotate(-3deg);
    }

    .shadow1::after{
      right:10px;
      left:auto;
      transform:rotate(3deg);
    }

   以上代码效果如下:

 

   一个非常普通的长方形块元素。

  利用一个更小的长方形伪类,加上box-sizing复制本体形状的特性,模拟出了纸张的立体感。

  同时,box-shadow是可以叠加的,类似box-sizing: 0 0 5px rgba(0, 0, 0, .8), 1px 1px 5px rgba(0, 0, 0, .8),写在前面的属性会在最上面。

  所以我们写出以下的效果:

  

CSS:.shadow {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -150px;
      width: 300px;
      height: 300px;
      box-shadow: 10px 0 5px rgba(228, 28, 28, 0.8), 0 10px 5px rgba(60, 90, 202, 0.8), -10px 0 5px rgba(81, 247, 86, 0.8), 0 -10px 5px rgba(193, 102, 178, 0.8), 10px 10px 5px rgba(81, 247, 86, 0.8);
  }

  同是,由于我们写的阴影的颜色是带透明度的,因此颜色会中和,我想利用阴影的叠加特性可以做出非常美的效果。

  

  box-shadow既然是一个本体的复制,也就是说我们可以用box-shadow来做出一些图标,用样式写出来的图标我想应该是会比图片加载快,并且是直接和页面一起渲染出来的,就像上面的一个三角图标,就是利用box-shadow写出来的。

  

HTML:<i class="icon-tri"></i>
CSS: .icon-tri {
        display: inline-block;
        position: absolute;
        margin-top: 30px;
        border-left: 2px solid #ddd;
        height: 4px;
        background-color: #ddd;
        box-shadow: -1px 1px #ddd, 1px 1px #ddd,
                  -2px 2px #ddd, 2px 2px #ddd,
                  -3px 3px #ddd, 3px 3px #ddd,
                  -4px 4px #ddd, 4px 4px #ddd,
                  -5px 5px #ddd, 5px 5px #ddd
            }        

  我个人认为,box-shadow应该是可以模拟出左右的图片,图标等。

  PS:第一篇正式的blog,由于本人缺乏精趣的文笔,只能写一些平时自己琢磨的一些东西。看到一个页面上某个图标或者样式非常炫酷,我都会去看下样式是怎么写的,然后自己再琢磨琢磨,敲敲键盘,自己模仿一个出来。

  我看到过有些插件可以做到让你上传一张图片,然后在一个60*60的格子上复现这个图片上60*60px的一块,我想每个px就可以是一个box-shadow,图片的像素可以用canvas的getImageData读取出来,遍历像素的颜色信息,应该这样就可以实现,

  下2周准备琢磨琢磨这个。

  

时间: 2024-10-05 01:04:15

关于box-shadow属性的一点心得的相关文章

关于div布局的一点心得

如果是嵌套的div布局,外面的div 比如是<div  class="container"></div>这时候设置的是一个大的外框架,居中显示.我们要在里面嵌套div来 显示内容,这时候就通过<div style="display:block;position:relative"></div>来使得div标签的位置是相对于外面最靠近它的父级标签也就是<div  class="container"

移动web动画设计的一点心得——css3实现跑步

[原]移动web动画设计的一点心得——css3实现跑步 今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别的伤感(虽然还在隔壁工作).加入了微信产品中心后,开始新的团队生活,工作比以前忙多了,有时周六也要上班,需要更快更高效的完成任务,除了重构页面,需要主动参与边缘外的工作,承担更多.最近比较忙,给自己敲个响钟:注意身体. 说完题外话,开始近期的主

FMDB使用的一点心得:数据库创建、制表、查询等以及image转换成二进制nsdata保存到数据库中

<span style="font-size:18px;">//首先,获取数据库的路径,(如果不存在,就是我们想要存储的路径),不用担心每次都创建数据库会重复,不会的,如果没有则创建,有了就不会再重复创建: //接下来,我们要制表,首先我们先查看我们的表是否已经存在,方法在下面代码中:如果存在则跳过,不存在则创建</span> -(void)DataBaseInit { //获取Document文件夹下的数据库文件,没有则创建 NSString *dbPath

开发微信支付的一点心得

由于使用了别人封装的微信公众平台SDK http://www.cnblogs.com/x3d/p/3740454.html  ,所以省去了完整理解开发手册的时间. 微信支付,即便交了保证金,你还是处理测试阶段,不能正式发布.必须到你通过程序测试提交订单.发货通知等数据到微信的系统中,才能申请发布. 然后,因为在微信中是通过JS方式调用API,必须在微信后台设置支付授权目录,而且要到二级三级目录下去,这对于使用MVC框架来说,是个小问题. 使用MVC,在开发环境,url往往是native url格

Layer的shadow属性

Layer的shadow属性 Layer中的阴影都是可以做动画处理的. - (void)viewDidLoad { [super viewDidLoad]; CALayer *layer = [CALayer layer]; layer.frame = CGRectMake(20, 20, 50, 50); layer.backgroundColor = [UIColor whiteColor].CGColor; layer.borderWidth = 1.f; /* --- shadow相关属

网页开发规则的一点心得

1.script文件放在body标签最后,script默认是 type="text/javascript",所以可以省略 2.css文件也要提取出来单独放在一个.css文件中用<link rel="stylesheet"  href="file address"  media="screen">引入文件中 3.建立scripts文件夹,用于放置脚本文件 4.建立css文件夹用于放置css文件 5.建立image文件

关于现场技术支持的一点心得

技术支持本质上是一种专业服务,礼貌的沟通交流是成功的第一步,解决用户问题的同时并让用户保持愉快的心情是终极的目标; 一点心得体会如下: 1.到现场后先观察询问用户是否方便,这一礼貌的举动边唱好的开场戏,尤其是针对不同部门的技术相关领导哈! 2.弄清楚问题的具体现象; 3.根据经验和日志信息进行初步分析判断,缩小问题范围; 4.分析客户系统的环境,ISO版本.日期.软件rpm包版本.相关配置文件是否更改过; 5.与客户交流,分析做过什么操作; 6.over

理解机器学习算法的一点心得

从Andrew ng的公开课开始,机器学习的算法我接触到的也越来越多,我觉得机器学习算法和传统算法的最大不同就是:不会要求一个问题被100%求解,也就意味着不会有完美的解法,这也是著名的"Essentially, all models are wrong, but some are useful."所表达的意思.正因为如此,机器学习算法往往不会有一个固定的算法流程,取而代之的把问题转化为最优化的问题,无论是ML(maximum likelihood),MAP(Maximum a Pos

关于INDEX SERVER+ASP建立查询引擎的一点心得

说起INDEX SERVER,我自己本来用的也不多,不过前两天公司要做一个INDEX的搜索,我从网上找了好多的资料,仔细分析了以后自己启动了索引服务,并进行了ASP程序的设计,第一天程序运行正常,结果第二天早上,我上班的时间发现查询INDEX SERVER的ASP程序不能用了,提示是Server.CreateRecordSet("NonSequential")错误,随后IIS不能解析ASP文件,我自己进行了一天的反复尝试,包括我停止了索引服务,删除编录,重新安装IIS也不能恢复,最后我