<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Cornerz - Bullet Proof Curved Corners using Canvas/VML</title>
<style type="text/css">
body, html {
font-family: arial;
padding: 0px;
margin: 0px;
}
body {
padding: 30px 100px 0px;
}
#cont {
width: 100%;
}
h1,h2 {
background: #080;
color: white;
z-index: 1000;
margin-top:20px;
display: inline;
padding: 5px;
padding-left: 20px;
}
p,li {
color: #400;
letter-spacing: 1px;
line-height: 1.5em
}
.test1 {
padding:2px;
margin: 10px;
font-size:20px;
background: #0df;
text-align: center;
text-transform: lowercase
}
textarea,code,pre {
color: #00f
}
.tab {
padding:2px;
margin: 10px;
border: 2px solid black;
border-bottom: 0px;
background:white;
font-size: 18px;
margin-right: 5px;
display: inline; float: left
}
.tab:hover {
background: black;
color: red;
cursor: pointer
}
.test1:hover {
background: black;
color: white;
cursor: pointer
}
</style>
<script type="text/javascript" src='jquery.js'></script>
<script type="text/javascript" src='cornerz.js'></script>
<script type="text/javascript">
$(function() {
$('.curve').cornerz()
$('.curve50').cornerz({radius:50})
$('.curveC').cornerz({radius:30, corners:"tl br"})
$('.curveD').cornerz({radius:10})
$('.tab').cornerz({radius:10, corners: "tl tr"})
$('h1,h2').cornerz({radius:40, borderWidth: 0, corners: "tl"})
})
</script>
</head>
<body>
<div id="cont">
<h1 style='margin-top: 0px;'>Cornerz v0.2</h1>
<p>基于jQuery的边角插件.</p>
<h2> 用法: </h2>
<br/><br/>
<code>$('.myclass').curve(options)</code>
<p>options有这些参数。默认的：</p>
<ul>
<li>半径（ 10 ） </li>
<li>borderwidth （从bordertopwidth或0读取 ）</li>
<li>背景（ "白" ）.</li>
<li>bordercolor （从bordertopcolor读取 ） </li>
<li>转角 ("tl br tr bl"). 具体指定那些边界。</li>
</ul>
<h2>我们为什么要用它?</h2>
<ul>
<li>别名</li>
<li>快速--性能提升</li>
<li>支持任何规模的半径和边界宽度</li>
<li>布局没有影响--自适应长度</li>
<li>支持流布局</li>
<li>在positions/display/floats下也可以使用</li>
<li>可以很容易做悬停效果</li>
<li>脚本只有4.0k </li>
<li>测试已经通过 :
<ul>
<li>IE6 XP/Vista</li>
<li>IE7 XP/Vista</li>
<li>Firefox 2 Ubuntu/Windows</li>
<li>Safari 3 Windows</li>
<li>Opera 9 Windows/Linux</li>
</ul>
</li>
</ul>
<h2>例子</h2>
<div class='curve test1' style='border: 0px; padding-bottom:1px; solid black' >
BORDER: 0
DISPLAY: BLOCK
</div>
<div class='curve test1' style='border: 5px solid blue;padding-bottom:1px; background: pink' >
BORDER: 5
DISPLAY: BLOCK
</div>
<div class='curve50 test1' style='border: 20px solid #0a0; color: #0a0; line-height: 100px' >
<span style='background: #0a0; color: white;font-size: 50px; font-weight: bold; '>
BORDER: 50
DISPLAY: BLOCK
</span>
</div>
<div class='curve test1' style='border: 1px solid black; color: white; background: blue; display: block; width:200px;' >
BORDER: 1
DISPLAY: Block
WIDTH: 200px
</div>
<div class='curve test1' style='border: 3px solid #fdd; padding-bottom:1px;padding-bottom:1px; display: inline' >
BORDER: 1
DISPLAY: INLINE
</div>
<div style='clear: both'></div>
<div class='tab' style=' ' >
经典论坛
</div>
<div class='tab' style=' ' >
经典论坛经典论坛经典论坛经典论坛
</div>
<div class='tab' style=' ' >
经典论坛经典论坛经典
</div>
<div class='tab' style=' ' >
....
</div>
<div class='tab' style=' background: red' >
经典
</div>
<div class='tab' style=' background: yellow' >
more tabs
</div>
<div class='tab' style=' background: yellow' >
b
</div>
<div class='tab' style=' background: #dfd' >
c
</div>
<div style='clear: both'></div>
<h2>问题与联系</h2>
<ul>
<li>IE在odd height有点麻烦 。 可以用<code>padding-bottom: 1px</code></li>
<li>联系: Jonah Fox (jonah@parkerfox.co.uk) 2008</li>
<li>http://parkerfox.parkerfox.railsplayground.net/cornerz/</li>
<li>简单翻译: CssRain (cssrain@gmail.com) 2008 01 09 </li>
<li>Blog: <a href="http://www.cssrain.cn">csrain.cn</a></li>
</ul>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style='clear:both'></div>
</div>
</body>
</html>
评论0
最新资源