HTML5系列代码:设计渐变的按钮

  • Webkit 是一个开源的HTML 渲染引擎,由苹果公司基于 KDE 的 KHTML 项目开发而成。我们从 Chrome
    的评测中已经看Webkit 是一个非常轻量的渲染引擎,因其紧凑干净的代码基础,出色的标准支持,以及很小的内存占用而备受赞誉。这些品质使得
  • Webkit 成为众多浏览器的热选内核。
  • Webkit 主要用于苹果的 Safari 浏览器与 iPhone,但一些重要的厂商如 Adobe,Nokia, Trolltech
    也使用这个核心。Webkit 的用户中还包括一些不太知名的浏览器,包括 iCab, Omniweb, Shiira, 以及
    Epiphany。在一些二线操作系统,如 Haiku, Syllable, 甚至 Amiga,Webkit
    也大行其道。越来越多的开发者,使用 Webkit 开发富 Internte 应用(rich Internet
    applications)。Google 在对众多内核进行评估之后,为 Android 移动浏览器,以及 Chrome 桌面浏览器选择了
    WebKit。开发者对 Webkit 公认的评价是:这是一个非常出色的渲染引擎,可以用于众多场合,它的吸引力让很多开发者开始怀疑
    Mozilla 的 Gecko 内核是否还有市场。
  • 苹果为什么抵制 Gecko
  • Gecko 源自 Netscape,并早于 KHTML,Gecko 因庞大与复杂的代码基础而频遭诟病。Gecko
    非常强大,但代价高昂,复杂,高内存占用。因此,在很多场合 Gecko 的众多功能反而成了负担。
  • Gecko 内核过于复杂的原因是 Gecko 意图提供除了 HTML 渲染之外的更多功能。Mozilla 早期的野心很大,Mozilla
    最早的应用套件包括浏览器,邮件和新闻组程序,Web 设计工具,IRC 聊天工具。除了渲染 HTML,Gecko
    还要提供一种应用广泛的,基于 XML 的用户界面生成引擎,XUL。XUL 被用在所有这些程序中。XUL 现在仍用在 Firefox
    中,用来生成用户界面,因此造就了 Firefox 最有价值的重多扩展应用。
  • Gecko 过于复杂的另外一个原因是 XPCOM,一个强大的组件系统。虽然 XPCOM 为 Gecko
    带来很多激动人心的功能,让这个渲染引擎实现组件化,然而,这个功能被一些开发者滥用,当 Ars Technica2004年采访
    Mozilla 开发者 Scott Collins的时候,Scott Collins 说,对 XPCOM 的滥用是 Mozilla
    犯的几个主要错误之一。
  • 鉴于 XUL 和 XPCOM 所带来的复杂性,苹果自然要考虑为 Safari 选择一种更轻量的内核。苹果要设计一款可以和 Mac
    操作系统紧密结合的浏览器,他们还预见到,这个引擎应该支持移动设备,他们因此认识到 KHTML 比 Gecko 更合适。
  • 2003年,当苹果决定在 Safari 中使用 KHTML 的时候,Mozilla 的 Mike Shaver 曾在博客中承认 Gecko
    的缺点。他同时预言,苹果会成为他们推广 Web 标准的联盟。他写道,“小而精练曾是我们的苦苦追寻的目标,Gecko
    的庞大与臃肿在各种评测中拉了我们的分数,如果我不得不写一个新浏览器,我会考虑 Mozilla 之外的选择。我希望 Mozilla 向
    Safari/KHTML 学习,因为它们用 1/10 的代码实现了非常棒的功能。”
  • Gecko 洗心革面带来 Firefox 3 的火爆
  • 2003年以来,发生了很多变化。Gecko 代码基础已经发展了很久,Gecko
    依然复杂,然而它的很多历史遗留的缺陷正被一一攻破,Gecko 为 Firefox 3 带来众多革新,为整个 Web
    浏览体验带来非常显著的改善。
  • Gecko 1.9 使用跨平台的 Cairo 渲染框架,对 SVG 的巨大改进简化了代码并引入一些非常 Cool
    的功能,如全页缩放,同时,重构的 reflow 算法,让 Gecko 通过 Acid 2 测试成为可能。Mozilla
    还非常显著地降低了对内存的占用,甚至超越了 Safari 和 Opera。
  • 对 XPCOM 的使用被大大减少,XPCOM 对资源的占用通过一个新的循环回收器得到减低。这个工作仍在继续,Mozilla 将在
    Firefox 4 中进一步减低 XPCOM 的负担。Gecko 的其它缺陷也在新的开发中被一一正视,比如,Firefox 3.1 的
    Alpha 版中就已经加入对 CSS 3 的支持,另外一些性能的改进会让 Gecko 更具竞争性。Mozilla 的
    TraceMonkey 引擎将可能包含在 Firefox 3.1 中,这将显著地提高 JavaScript 性能。
  • 从技术的角度,Gecko 现在非常稳固,丝毫不比 Webkit 差。一些证据显示,Gecko
    正在进军移动领域,这在不久前还是不可能的事。Mozilla 拥有资源,开发经验以及社区支持,这将引导 Gecko 进入任何 Webkit
    所能进入的地盘。 决定人与人差距的不是视力,而是视野,视力可以看到一样的东西,视野却可以看到不同的世界。
<!DOCTYPEHTML>
<html>
<head>
<meta charset="utf-8">
<title>设计渐变的按钮</title>
<style type="text/css">
div{
	margin-top:10px;
}
.button {
	display:inline;
	padding:5px 20px;
	font-size:12px;
	font-weight:lighter;
	font-family:Arial, Helvetica, sans-serif;
	border:none;
	color:#333;
	letter-spacing:1px;
	text-decoration:none;
	/* 设置阴影效果 */
	-webkit-box-shadow:2px 2px 2px #333;
	-moz-box-shadow:1px 1px 1px #ccc;
	box-shadow:1px 1px 2px #333;
	/* 基于Webkit内核的实现 */
	background:-webkit-gradient(linear, left top, left bottom, from(#ffcc33), to(#f90));
	/* 基于Gecko内核的实现 */
	background:-moz-linear-gradient(#ffcc33, #f90);
}
.button:hover {
	/* 基于Webkit内核的实现 */
	background:-webkit-gradient(linear, left top, left bottom, from(#ff9933), to(#ff3300));
	/* 基于Gecko内核的实现 */
	background:-moz-linear-gradient(#ff9933, #ff3300);
}
.radius5 {
	/* 圆角半径5px */
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
}
.radius15 {
	/* 圆角半径15px */
	-webkit-border-radius:15px;
	-moz-border-radius:15px;
	border-radius:15px;
}
</style>
</head>
<body>
<div> <span class="button">Span</span>
  <input type="button" value="Buttom" class="button" />
  <a href="#" class="button">Link</a> </div>
<div> <span class="button radius5">Span</span>
  <input type="button" value="Buttom" class="button radius5" />
  <a href="#" class="button radius5">Link</a> </div>
<div> <span class="button radius15">Span</span>
  <input type="button" value="Buttom" class="button radius15" />
  <a href="#" class="button radius15">Link</a> </div>
</body>
</html>

你可能感兴趣的:(HTML5)