7. 圆角
你可以使用你熟悉的桌面浏览器中的圆角方法,如果你的目标只有Safari,那还可以使用-webkit-border-radius CSS扩展,对于Firefox 有一个类似的-moz-border-radius,但在IE和Opera中会显示为一个简单的方框。
.box {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #ddd;
border: 1px solid #aaa;
}
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #ddd;
border: 1px solid #aaa;
}
例10(链接:http://www.sitepoint.com/examples/iphone-development-12tips/rounded.html)显示了div元素上的圆角。使用iPhone浏览这个地址的效果如下图所示。
图 7 圆角效果