CSS Sprites + 圆角[译](4)
作者:板凳 来源:译言 发布时间:2009-05-08 16:10:00
模型 4 (红色边框)
模型4 跟模型1、2、3又有什么区别呢?边框和颜色,让我们来解决这些因素吧。
HTML 代码:
<div class="roundedBox" id="type4">
<strong>My content in roundedBox Type 4</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
CSS 代码 (在 sprite 中给您的边角的边框都添上边框,并使 .roundedBox 类的背景及边框融合 sprite。)
#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
好了,这个就是截图效果。我们的边角还不能正确地覆盖 #type4 边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。让我们做到这一点:
#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
#type4 .corner {background-image:url(../images/corners-type4.gif);}
#type4 .topLeft {top:-1px;left:-1px;}
#type4 .topRight {top:-1px; right:-1px;}
#type4 .bottomLeft {bottom:-1px; left:-1px;}
#type4 .bottomRight {bottom:-1px; right:-1px;}
好了,这就是我们完成的模型 4。预览圆角矩形模型4 (红色边框). We are almost there, don’t quit now :p模型
5 (垂直渐变)
好了,模型5会需要更多的工作量,我们应该这样:
修改上下边角的高度 (由渐变度决定(depending on your gradient))。
修改上下边角的背景图定位 (由渐变度决定)。
通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。
值得注意的是,我们必须给内容设置一个大小,或者给容器设置一个最小高度(由渐变度决定)。
让我们开始吧。
HTML 代码 (跟之前的一样):
<div class="roundedBox" id="type5">
<strong>My content in roundedBox Type 5</strong>
<div class="corner topLeft"></div>
<div class="corner topRight"></div>
<div class="corner bottomLeft"></div>
<div class="corner bottomRight"></div>
</div>
CSS 代码:
我的渐变是从上到下垂直的。所以我们必须增加上边角的高度,以及更改下边角的背景图位置。当您看到我的新的 sprite 就会明白为什么会这么处理。就是下面这张:
我的div中的背景图片是这样的:
1px 的宽度,它的确是存在的。 我的下边角有一条实心颜色,刚好可以匹配div的背景色。 少说话多行动。我们来继续定义容器 div :
#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度,正如我之前所说的,渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片,为的是能得到更好的渐变质量):
#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
现在,我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):
#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
最后,我纠正下下边角的背景图定位:
#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}
全部完成! - 预览圆角矩形模型 5 (垂直渐变)
IE6 版本
这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它,那么它会泄露到盒模型之外。 使用 IE6 条件式注释法来定义它。
最后的想法
我希望这项技术对您会有帮组,并且不会显得太难。垂直渐变、透明的角落,只要多加练习,您的脑袋会变得更加好用,也会更加容易定义样式。
猜你喜欢
- 那是一杠还是两杠呢?最简单的方式就是拿出钱包,掏出张“新”的50或100,翻到背面的银线上,就会发现两杠的符号。这个是以前跟同事在讨论是一杠
- 下面是IN条件运算符的SQL语句:SELECT column1, SUM(column2) FROM&nbs
- 概要:Oracle关系数据库系统以其卓越的性能获得了广泛的应用,而保证数据库的安全性是数据库管理工作的重要内容。本文是笔者在总结Oracle
- Q. How can I restrict access to my SQL Server so that it only allows c
- 比如要访问b站在a站设置一个cookies,则可以这样做: 1.在b.com下建立一个文件cookies.htm 内容为: 代码如下:内容摘
- 如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 J
- 阅读之前:在看文章具体内容之前,希望你可以 先打开IE8,打开http://www.taobao.com,然后在地址栏里输入:javascr
- 第一章:基本的圆角框第二章:透明圆角化背景图片第三章:圆角化图片 第四章:CSS圆角框组件 V1.0在上面的案例中,我只给出最为原始的圆角框
- 下面是一些有助于更有效地使用 SQL 事件探查器的提示和技巧。运行的跟踪过多如果 Microsoft? SQL Server? 实例运行得过
- 如何用通过Web访问OLAP数据? <% Set Conn=Server.CreateObject(″A
- 浏览器经常Cache你的页面,这是一个很麻烦的问题,下面先提出几种方案来解决一般的问题:(把下面的代码加入到asp程序的最开始位置)<
- SQL语句先前写的时候,很容易把一些特殊的用法忘记,我特此整理了一下SQL语句操作,方便自己写SQL时方便一点,想贴上来,一起看看,同时希望
- 前提条件:1.安装好Wampserver64(版本不限)2.Wampserver64软件启动后 变为绿色如:3.在数据库里面创建好名为&am
- 我们有理由相信采用新的内核版本(2.2.16-3 smp)也应该有性能的提升: OS2: Newer minor version kerne
- 前几天翻出以前写的一个纯CSS仿微软经典菜单,现在看来才感叹,微软的经典菜单确实很经典,至少看起来不觉得厌烦。感叹归感叹,想想既然可以实现下
- 通过status命令,查看Slow queries这一项,如果值长时间>0,说明有查询执行时间过长以下为引用的内容:mysql>
- 动机: 查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了。以往的信息查询都是连接到数据库的,每一次点击都必须要后台数据库的支持。
- 当系统出现故障时,只要存在数据日志那么就可以利用它来恢复数据解决数据库故障。作为SQL Server数据库管理员,了解数据日志文件的作用,以
- jQuery 1.4 源码 449 行(core.js 431 行),判断是否为函数的方法如下(思路来源于 Douglas Crockfor
- //关闭,父窗口弹出对话框,子窗口直接关闭this.Response.Write("<script language=jav