emu in blogjava
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  171 随笔 :: 103 文章 :: 1052 评论 :: 2 Trackbacks
纯html的折线新画法
<span style="border-left:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:10px"></span>

<span style="border-left:99px solid;border-left-color:transparent !important;border-left-color:yellow;;border-top:396px solid white;width:0px;position:absolute;top:10px;left:12px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>

 <span style="border-right:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:110px"></span>

<span style="border-right:98px solid;border-right-color:transparent !important;border-right-color:yellow;border-top:392px solid white;width:0px;position:absolute;top:10px;left:110px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span> 

这个实现实在是有点匪夷所思了。IE/FF/OPERA下面可用。在safari下面计算border的时候有多一个像素的误差，因此这个坐标要做一些调整：

<span style="border-left:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:10px"></span>

<span style="border-left:99px solid;border-left-color:transparent !important;border-left-color:yellow;;border-top:396px solid white;width:0px;position:absolute;top:10px;left:12px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span>

 <span style="border-right:100px solid white;border-top:400px solid red;width:0px;position:absolute;top:10px;left:110px"></span>

<span style="border-right:98px solid;border-right-color:transparent !important;border-right-color:yellow;border-top:392px solid white;width:0px;position:absolute;top:10px;left:110px;filter:progid:DXImageTransform.Microsoft.Chroma(color='yellow')"></span> 
 
posted on 2007-07-20 19:42 emu 阅读(1911) 评论(3)  编辑  收藏

评论

# re: 纯html的折线新画法 2007-11-22 10:21 bojna
确实匪夷所思  回复  更多评论
  

# re: 纯html的折线新画法 2008-01-11 09:24 emu
http://labs.cloudream.name/google/chart/api.html  回复  更多评论
  

# re: 纯html的折线新画法 2008-01-21 17:56 coolery
看了之后想吐血  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: