CSS 3入门
作者:dudo 来源:dudo博客 发布时间:2009-04-19 13:00:00
我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中文译本,转载请注明。
如果你关注CSS,那么你一定听说过CSS3,它是本应该在几年前问世的下一代样式表语言。
是的,CSS 3样式文档至今还没有最终完成。如果你已经急不可待了,那么你也不必感到孤独。虽然这它还没有最终定型但是很多浏览器厂商已经开始支持其中的一些新特性了。
在CSS 3的支持上,Opera和Safari走在了前列,不过Firefox 3开始支持一些新的CSS 3特性了,而在Firefox 3.1则承诺对于CSS 3的支持至少会有和其他浏览器差不多。
呵呵,我知道你一定会说:“这样还远远不够,我必须让我的网站支持Internet Explorer才行”。
当然,你是对的。Internet Explorer用户的确没有那么幸运。尽管如此,这并不妨碍你在Firefox/Opera/Safari用户中使用CSS 3的圆角技术,只不过IE中无法理解圆角而显示的是背景而已。
我们必须承认,这些CSS规则要经过一两年的时间才能成为主流,但这并不意味着你现在不可以了解它们。
想成为网页设计中的顶尖高手吗?全副武装随我一起深入超酷的新规则腹地。
本文只是一篇维基文章。如果你了解CSS 3.0中的其他特性并乐意分享的话,请登录并补充。
圆角
Web 2.0的第一准则:是否具有圆角,这个很摩登。
不管你是如何设计圆角矩形的,至少现在的新特性border-radius可以让你不必去排列那些图片或者使用JavaScript来实现web 2.0效果。
假如有下面一行HTML代码:
<p class="r-box">Try doing this without images</p>
可以使用下面的样式规则来实现元素的圆角外形:
.r-box {
background-color: #666;
color: #fff;
line-height: 20px;
width: 200px;
padding: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
下面是Firefox和Safari(包括Chrome)中的在线演示效果:
Try doing this without images
如果你使用的是其他浏览器,下面是在Safari中的演示截图:
那么上面我都做了些什么工作呢?首先前五行是一般的CSS 2中的声明,它们定义了元素的基本样式。最后两行才是我们真正关心的,它就是CSS 3中的样式声明border-radius。由于这个规则还没有最终公布,各浏览器厂商通过在其前面加上不同的前缘来实现其效果,Firefox中使用的是-moz-,Safari(和Chrome)中使用的是-webkit-(Safari和Chrome都是基于webkit的浏览器)。
这条规则的工作原理如下(opLeft, TopRight等分别代表的是相应的像素值):
border-radius: TopLeft TopRight BottomRight BottomLeft;
border-radius: TopLeft BottomLeft+TopRight BottomRight;
border-radius: TopLeft+BottomRight TopRight+BottomLeft;
border-radius: ALL;
上面的例子中我们使用的最底下的规则,如果你只想让两个角显示为圆角,就可以这么写:
-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;
注意,上面的写法中,W3C更倾向采用Firefox的写法。由于border-radius还没有最终实现,Opera决定在Opera 9.5中放弃对其支持。
在使用了CCS 3中的border-radius后同样想在IE中使用图片来实现这样的效果,那么你可以查看这里。它的好处在于现代浏览器中并不会由于有很多圆角图片而降低速度。
猜你喜欢
- 一、密码式给数据库起一个随机复杂的名称,避免被猜到被下载,这种方式在以前很流行,因为大家都对自己的代码很有自信。但随着错误提示对数据库地址的
- 在经过前面几个部分的操作之后,我们的网页已经图文并茂,具有相当的效果了,但是这对于网页来说还不够,为了网站中的众多网页能够成为一个有机的整体
- 减少HTTP请求,是可以提高网站速度的,把所有的背景图像都放到一个图片文件中,然后通过CSS的background-image和backgr
- 如果我们希望把一个网站的更新实时发布到另一个网站上,最好的方法是通过 RSS 进行转载。如果只是需要简单的对更新的条目做个提示的话,使用 J
- Ajax 技术改变了大型商业 Web 应用程序的外观,但是许多较小的 Web 站点都不具备足够的资源重新构建完整的用户界面(UI)。Ajax
- SQL Server管理,你做得好吗?下文这些可能会对你的工作有一些帮助,不妨耐心的看看吧。1. 数据库文件有.mdf .ndf .ldf三
- 译序:本文译自Smashingmagazine,但是原文讲述的内容有些浅,也不是很完整,前端观察在翻译的前提下,增加了更多的更系统的内容。如
- 完成了UI,我们就需要对数据进行处理了。在开始“数据”的本地存储之前,我们先来了解一下client-side database storag
- 现有问题当前的项目中包括一个6200万行、500多列的表。其中的数据来自SQL Server以外,它们到达的表中有一个标识主键,所有剩下的列
- SQLserver 2000中出现“指定的服务并未以已安装的服务存在" 解决方案一、将计算机名改成大写。二、将sql server
- <% Dim aData aData = Array(3,2,4,1,6
- 如何制作一个防止多次刷新计数的图片计数器?请问如何做一个专业的图片计数器? <%countlong
- 如果你忘记了你的MYSQL的root口令的话,你可以通过下面的过程恢复。1. 向mysqld server 发
- 代码如下: function astro(birth) astro="" if birth=""
- global.asa<SCRIPT LANGUAGE=VBScript RUNAT=Server>Sub&n
- 很多时候,我们都需要获取windows消息提示框的文本内容,例如系统异常信息,软件错误提示等。。。但是如何获取提示信息呢?通常我们的印象中,
- 客户的一台服务器出现Raid故障,经过我们的努力,数据基本恢复成功,但是其中的一个SQL Server日志文件(扩展名LDF)损坏严重,基本
- 查询语言通过在查询表格中键入单词或短语,然后单击按钮执行查询,就可以在 Web 站点中搜索任意的单词或短语(例如,查询表格示例
- 最近做网站期间遇到个问题,就是用到比较流行的lightbox效果,就是点击链接后会弹出个固定大小窗口,弹出后窗口下面的内容是被遮罩掉的,最近
- 在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪