WebKit中可用的CSS高级特性

5.简单的CSS圆角

圆角可能会给页面的实现带来一些难度，比如，它可能需要为每个角使用一张图片，但是这可能会引起某些表现上的问题（比如不同的浏览器可能表现上会有细微的差别）。在WebKit中被支持的CSS3的”border-radius”属性让实现圆角变得非常简单，它只需要几行简单的CSS代码。如下所示：

1 2	#boxes div { border: 2px solid black; padding: 10px; margin:5px; width:200px; text-align:center; background:#eee; }

<div id="boxes">
	<div style="-webkit-border-radius:15px;">
		All sides
	</div>
	<div style="-webkit-border-bottom-left-radius:15px;-webkit-border-top-right-radius:15px;">
		Opposite corners
	</div>
	<div style="-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:15px;">
		Top
	</div>
	<div style="-webkit-border-top-right-radius:15px;-webkit-border-bottom-right-radius:15px;">
		Side
	</div>
</div>

这段样式代码定义所有的在boxes里面的DIV都要有一个比较大的border（边框）、边距、宽度、背景等。然后每个div标签的border-radius被设置为不同的方式。你可以在下面看到运行结果：

Round cornered boxes using just CSS

截图6. 纯CSS圆角

第一个div中border-radius被设置为所有的角，然后第二个div只有左下角和右上角，第三个div就像一个tab，只有上面的角被设置为圆角，最后一个div被设置为单边的圆角，只有右边的两个角是圆角。

6.全新的表单控制

WebKit同样提供一些可用于你的页面全新的控制。下面的例子演示一个水平滑动条、一些新样式的按钮以及一个很像Safari工具栏的搜索框

<input type="range" style="-webkit-appearance:slider-horizontal;"><br/><br/>
<button style="-webkit-appearance:button;width:200px;height:30px;">gradient button</button><br/><br/>
<button style="-webkit-appearance:push-button;width:200px;">aqua button</button><br/><br/>
<input type="text" style="-webkit-appearance:searchfield;" value="kitten"></input><br/>

运行效果：

Some of the new button types available with WebKit

截图7. WebKit可用的一些新的按钮

新的滑动控制条尤其好用，因为这个滑动控制条的确不太好用JavaScript来写，并且还要在每个浏览器中都兼容。

文章共4页: [1] [2] [3] [4]

更多的WebKit中可用的CSS高级特性请到论坛查看: http://BBS.TC711.COM

【双击滚屏】【评论】【收藏】【打印】【关闭】来源：互联网日期：2009-3-10