春天到了,各种绚丽的花朵都开放了,金黄的油菜花,成了蝴蝶的天地,美丽的蝴蝶在金黄色的舞台上跳着柔和而优美的舞姿。它们一会儿在空中飞舞,一会儿静静地停留在油菜花上。给春天增添了不少乐趣。油菜花的美丽,同时也吸引了不少 "劳动人民 "——蜜蜂,它们总是不分昼夜地不辞辛劳地给油菜花授粉。偶尔一阵微风吹来,金黄的油菜花立刻涌起了高低起伏的 "金浪花 "。远远望去,真是美不胜收!
相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来:
CSS Code复制内容到剪贴板
- .triangle_border_up{
- width:0;
- height:0;
- border-width:030px30px;
- border-style:solid;
- border-color:transparenttransparent#333;/*透明透明灰*/
- margin:40pxauto;
- position:relative;
- }
或者:
CSS Code复制内容到剪贴板
- .border_bottom{
- width:0;
- height:0;
- border:10pxsolidtransparent;
- border-bottom:11pxsolid#000;
- }
这样写都有个问题,就是在firefox里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。
在网上搜索很少有人提到,有提到的好像也没实际解决,下面介绍个非常简单的方法,就是给有颜色的那个border宽度多加一个像素:
CSS Code复制内容到剪贴板
- .border_bottom{
- width:0;
- height:0;
- border:50pxsolidtransparent;
- border-bottom:51pxsolid#000;
- }
是不是很滑....
以上就是为大家分享的文章,希望对大家的学习有所帮助。
原文:http://www.cnblogs.com/hutuzhu/p/4169252.html