css圆角导航与三角形【2012/07/18】

网页制作中经常有导航使用圆角，而在列表、下拉提示、面包屑导航等位置经常使用到三角形。以下是css实现的这两个小技巧，简洁好用。

1、圆角  css属性： border-radius（IE不支持）可以很方便的生成 CSS3 圆角代码，即时显示效果，并提供 webkit ，Gecko 兼容代码。

{
    border-radius:_ px  _px  _px _px;
    -webkit-border-radius:_px _px _px _px;
    -moz-border-radius:_px _px _px _px;
}

 

2、三角形实际上是用border属性来实现的,将其中三边设为白色。

.triangle{
    width:0;
    height:0;
    border-color:#ccc #fff #fff #fff;
    border-style:solid;
    border-width:_px;
}