CSS Sprites + 圆角[译]（3）
作者：板凳 来源：译言 发布时间：2009-05-08 16:10:00
标签：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 (紫色). 都学会了吗？好，现在我们再进一步学习。
0
投稿猜你喜欢
- 背景：pony是公司的首席体验官、首席产品经理。这次在产品峰会上pony将自己平时经验的积累与大家交流，体验较细。这次分享研发管理部，设计中
- 一个能对访问者进行编号、记录访问次数、IP、时间的统计制作实例我以ACCESS库为例子，其实用SQL SERVER库也只要改一下链接库的语句
- CSS与JS紧密配合，为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属
- 一、怎么样取得最新版本的MySQL？要安装MySQL,首先要当然要取得它的最新版本，虽然大家都知道在FreeBSD的Packages中可以找
也许有人会说我火星了，但我的确是第一次知道，欢迎我从火星归来吧。在 Yahoo! 首页上隐藏着这样一个小秘密，大家到 www.yahoo.c- 论坛有人问起如何获取读取CSS属性值，就写了下面这段兼容各浏览器的获取HTML元素的css属性值函数：function getSt
- String Types(字符串类型)字符串类型Mysql支持多种字符串类型的变体。 这些数据类型在4.1和5.0版本中有较大的变化， 这使
- 针对border边框属性在浏览器中的渲染方式很早以前就开始在QQ群中看到大家在讨论，而我也一直以border:0 none;的方式处理。其中
- 视觉设计是什么，人们怎么认为它的，自己又是怎么对待和理解它，它的核心价值是什么。视觉设计，冒似很艺术，跟艺术相关的职业，给大多数人的印象是做
- 由于工作需要,所以前一阵子将IE升级到了8.0,结果今天发现出现一个问题,eWebEditor的在线编辑器不好用了,仔细想想,肯定是IE8搞
- 1、并双击新建工程窗口中ActiveX DLL图标，VB将自动为项目添加一个类模块，并将该项目类型设置为ActiveX DLL。2、在属性窗
- 印刷和网络是不一样的。传统的布局排版并不适于网络，因为传统的印刷布局，几乎只想要什么样的平面效果都能很好的达到，但在网络上设计就很困难，尽管
- 一、从外部文档中粘贴时，如果只要文字而不想要其格式，可以使用“Edit→paste as text”命令，不要直接用Ctrl+V。二、当有浏
- 有朋友问,在数据库中如何查询数据所在的行,一般我们建议一个自增字段就可以了.但是有时却会删除数据,那么那个自增字段也不正确了先不管朋友们为什
- 上节我们介绍了表连接，更确切的说是inner joins內连接． 內连接仅选出两张表中互相匹配的记录．因此，这会导致有时我们需要的记录没有包
- 因此，在我接触那么多种语言当中，asp是最不严格的一种，是对程序员要求最低的一种。 昨天测试了asp.net、php和asp的运行速度比较，
- 使用select @@identity 得到刚插入数据的ID1.适用于所有 ADO 版本<％Dim loConn,
- FLASH 全屏有二类四种：1、不用浏览器直接用FLASH播放器播放的类型：A、不显示FLASH播放器菜单栏的全屏（类似屏保效果），在第一帧
- fso对象CreateTextFile方法调用时可能会报“无效的过程调用或参数”错误，在使用ASP生成静态页面时，如果传入的字符串参数编码为
- Sample:http://www.happyshow.org/sample/20060613/nav/nav.html<!DOCTY
