注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

CSS3 box-shadow盒阴影 使用技巧  

2015-02-06 10:41:44|  分类: 实例 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、上下箭头 :
  下图是放大多倍的箭头图形
小图标放大后
盒阴影的本质是复制

CSS代码:

.icon-up{display:inline-block; width:20px; height:20px; background:url(icon.gif) no-repeat center;}
:root .icon-up{background-image:none;}
.icon-up::before{
    content: ''; position: absolute; margin: 5px 0 0 9px; 
    height: 4px; border-left: 1px solid #bdbdbd; 
    box-shadow: 1px 1px #bdbdbd, 2px 2px #bdbdbd, 3px 3px #bdbdbd, 4px 4px #bdbdbd, 5px 5px #bdbdbd, 
               -1px 1px #bdbdbd, -2px 2px #bdbdbd, -3px 3px #bdbdbd, -4px 4px #bdbdbd, -5px 5px #bdbdbd;     
}

HTML代码为:

<i class="icon-up"></i>



  评论这张
 
阅读(97)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017