JavaScript脚本库创造CSS圆角-HTML教程-爱易网页

JavaScript脚本库创造CSS圆角

日期：2014-05-17　浏览次数：20637 次

JavaScript脚本库创建CSS圆角

2010-12-02 08:44

使用NiftyCube.js脚本库动态的创建css圆角

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

NiftyCube.js产生css圆角需要的条件：

1．首先要导入NiftyCube.js及其它的style.css，尤其要注意路径的正确性（这里可以直接在解压了之后的NiftyCube文件夹下进行测试）

???? NiftyCube.js可以在http://www.html.it/articoli/niftycube/NiftyCube.zip这个网址中下载

2．页面或者是需要产生圆角的parent必须设置有颜色，准确的说应该是两者有对比色，否则看不到效果

完整的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Nifty Corners: Javascript and CSS rounded corners</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 3.1">
<style type="text/css">
body{

???? padding: 30px 0 0;background:#000000;
???? font: 100.01%/1.3 Verdana,Arial,sans-serif;text-align:center

??? }
div#box{

????? width: 18em;padding: 20px;margin:0 auto;
????? background:#E6E6E6;color:#000

??? }

</style>
<script type="text/javascript" src="niftycube.js"></script>
<script type="text/javascript">
???? window.onload=function(){
??????? Nifty("div#box","normal");
????? }
</script>
</head>
<body>
?? <div id="box">
??? ?? <h1>Nifty Corners Cube™</h1>
???? <p>One call. Two parameters. Three sizes.</p>
</div>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

JavaScript脚本库创造CSS圆角

相关资料更多>

推荐阅读更多>