网上商店系统
首    页 | 电商资讯 | 电商作品 | 成功案例 | 电商方案 | 系统演示 | 电商建设 | 电商索引 | 电商问题
当前位置: 首 页 > 电商建设

精通CSS(24)- 洋葱皮阴影

文章来源:北京宇光宏达       浏览次数:1274次        发布日期:2011-7-20 9:35:15

3.3.4  洋葱皮阴影

我要演示的最后一种阴影方法使用与圆角框方法非常相似的技术。但是,并不是使用蒙板盖住阴影的末尾,而是创建两个阴影末尾GIF,然后将它们覆盖在主阴影图像的末尾上。为此,需要向标记中添加两个无语义的div,作为应用这些图像的钩子。

基本的HTML如下所示:

与前面一样,将主阴影图像作为背景应用于主div

也与前面一样,对这个div进行浮动,让它产生收缩包围。

现在,可以将左下角图像应用于外层div的左下角,将右上角图像应用于内层div的右上角。在内层div的底部和左边添加一些填充,产生阴影效果。为了确保主图像容器在Mac上的IE 5.2中产生收缩包围,还需要浮动这两个div

最后与前面一样,可以在图像上添加边框和一些填充,产生照片式边框:

最终的CSS如下所示:

这种方法非常容易理解,而且它创建的阴影在许多浏览器上都可以工作。它的缺点是需要添加两个额外的无语义div。这是因为CSS当前不允许在一个元素上添加多个背景图像。以后CSS 3将提供这个功能,所以使用多个元素只是一种过渡性方法,以后应该很容易从文档中去掉这些额外的标记。如果希望标记更简洁,那么可以使用JavaScript或生成的内容来添加这些额外元素。


特别提示:如需转载此篇文章请注明文章来源企策互通
文章关键词:
上一篇:
精通CSS(23)- 模糊阴影 (2011-7-19 关注度:1291)
下一篇:
精通CSS(25)- 图像替换 (2011-7-17 关注度:1248)
 
 相关文章
 
Asp中通用函数(2011-7-20 关注度:1259)
精通CSS(23)- 模糊阴影(2011-7-19 关注度:1291)
我的常州装饰网如何建立的(2011-7-17 关注度:1742)
保持网站流量 对网站改版方案建议(2011-7-19 关注度:1146)
浅谈“色彩层次”在设计中的运用(2011-7-17 关注度:1135)
学设计必看之设计常识(2011-7-17 关注度:1775)
Photoshop巧修曝光问题照片(2011-7-16 关注度:1157)
十大网站设计错误 - 2006 Top Ten Mistakes in Web Design(2011-7-18 关注度:2026)
 
行业观点类别
 

开店疑难(94)
电商建设(143)
电商运营(217)
电商发展趋势(96)
售后服务(10)

电商建设关注排行 
  1.网页设计页面大小分析 不同分辨率下的网页大小
  2.网站建设合同模板 标准网站建设合同下载
  3.网站设计论文下载
  4.便宜网站建设 便宜网站建设分析
  5.网站建设业务营销策略 企业网站建设业务营销分析
  6.小议中英文网站排版设计的视觉差异
  7.提高网站友好度的十点建议
  8.十大网站设计错误 - 2006
  9.深度分析 企事业单位网站建设问题严重
  10.网站可信度建设十大准则 如果建立可信度高的企业公
电商建设最新文章 
  1.基于SMS的移动电子商务存在哪些安全问题?
  2.国内首个电子商务调解中心获批并正式成立
  3.关键词对网站的运营有什么影响?怎么分析网站关键词?
  4.什么是网上商城前端设计与网店前台设计?
  5.网页META标签内容写作规范要点
  6.Asp中通用函数
  7.探讨网站获得盈利的前提条件
  8.网站建设三步:申请空间编写网页上传文件
  9.明定网站的优化设计
  10.披露创业秘密 网站的盈利方式有哪些
首    页  |  关于我们  |  定制开发  |  购买流程  |  网店系统特性  |  商城系统策划  |  开店疑问问题  |  网店建设观点  |  友情链接  |  联系我们
  Copyright 2005-2007 51system 网上商城系统 All Rights Reserved 北京宇光宏达 版权所有 地址:北京市朝阳区东三环北路戊2号A1505室。
京ICP备11007506号