CSS Sprites 圆角制作教程
圆形盒模型 1 (蓝色)
HTML 代码:
<div class="roundedBox" id="type1">
<strong>My content in roundedBox Type 1</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
我们必须给容器 div 定义一个ID为 #type1,用来实施特殊背景。
CSS 代码:
首先,我们得给 #type1 匹配一个背景色,使之融合于 sprite 中的圆角:
#type1 {background-color:#CCDEDE;}
之后,通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:
#type1 {background-color:#CCDEDE;}
#type1 .corner {background-image:url(../images/corners-type1.gif);}
好了,我们的第一个圆角矩形大功告成了!预览圆角矩形模型1 (蓝色)
圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)
模型1,模型2跟模型3的唯一差别就是它们的颜色,所以我们也仅仅只修改这些。
模型 2 (绿色)
HTML 代码:
<div class="roundedBox" id="type2">
<strong>My content in roundedBox Type 2</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
CSS 代码 (仅仅修改 sprites 的颜色及背景色)
#type2 {background-color:#CDDFCA;}
#type2 .corner {background-image:url(../images/corners-type2.gif);}
模型 3 (紫色)
HTML 代码:
<div class="roundedBox" id="type3">
<strong>My content in roundedBox Type 3</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
CSS 代码 (仅仅修改 sprites 的颜色及背景色)
#type3 {background-color:#D3CADF;}
#type3 .corner {background-image:url(../images/corners-type3.gif);}
预览圆角矩形模型 3 (紫色). 都学会了吗?好,现在我们再进一步学习。
相关文章
使用css sprites来优化你的网站在Retina屏幕下显示实现原理与代码
CSS sprites(CSS图片精灵)已经存在很久了。事实上,八年前就有CSS Sprites的详细介绍。CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要2012-12-24css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西,涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣,所以会去了解多一点2012-12-03- CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生。这个被国内开发者昵称为CSS精灵 CSS雪碧的家伙到底解决了什么问题,我们又怎样合理使用这个技术呢?下面让我2012-05-31
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules2011-08-02
- 众所周知,减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS2011-06-21
- CSS Sprites的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度2011-05-11
- 阿里妈妈UED谈CSS Sprites技术.2009-10-20
- 论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?” 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是2009-06-21
- CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for F2009-04-24
- 网页制作Webjx文章简介:在google中搜索一下css sprites这个名称,会查出很多信息,并且随着SEO越来越被人们重视,采用这种技术来进行图片优化的网站越来越多,国内几家大2009-04-02
最新评论