如何使用jQuery Round Corner插件制作圆角?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使用jQuery Round Corner插件制作圆角?相关的知识,希望对你有一定的参考价值。
我的网站上需要一个圆角。我对jQuery和javascript一般缺乏经验;加载和调用此插件的正确方法是什么?
您需要使用jquery.corner.js并在脚本中添加
$(document).ready(function(){
$("#box1").corner();
});
在你的加价中,你应该有:
<div id="box1"></div>
你可以查看jQuery Rounded Corners Tutorial了解更多信息。
1.将此代码添加到您的头部(假设您的jquery是本地的):
<script src="Scripts/jquery-1.3.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.corner.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('div.round').each(function() {
var q = $(this).corner("rounded 7px");
eval(q);
});
});
</script>
2.将class =“round”添加到div包装器
<div class="round"></div>
- 只需将class =“round”添加到页面上所需的任何div即可。
- 更改7px值以调整角落的“圆度”。数字越大越圆。
查看此演示页:jQuery Corner Demo
我会说go with css3。对于Firefox,它是:
.roundedCorners { -moz-border-radius: 5px; }
对于Safari / Chorme,它是:
.roundedCorners { -webkit-border-radius: 5px; }
我会在那里停下来。由于这纯粹是一个演示/外观的东西,我不会搞乱JavaScript解决方案。如果您的用户没有使用支持css3的浏览器,他们就不会得到圆角。
本文/教程非常详尽:http://woork.blogspot.com/2009/08/css3-rounded-corners-for-every-browser.html
以上是关于如何使用jQuery Round Corner插件制作圆角?的主要内容,如果未能解决你的问题,请参考以下文章
如何解决 JQuery Mobile `ui-corner-all` Corners
UIButton Round Corner 在 iPhone 5 上无法正常工作
xml 按钮圆角。字体:https://stackoverflow.com/questions/43494108/round-corner-google-sign-in-button-android