尊敬的客户您好,经我们多年的网站制作、网络营销经验,请建站和优化同时做,以达到最好的推广效果!----创赢网络 2012-06
加入收藏设为首页
  • [2013-8-7]洛阳贷款 洛阳小额贷款公司网站上线
  • [2013-8-4]洛阳开锁公司 洛阳开锁电话优化
  • [2013-5-25]洛阳聚鑫钢绳有限公司网站上线
  • [2013-5-20]吉利区图书馆网站备案通过上线开通
  • [2013-5-13]洛阳旭晋昇商贸有限公司 食品批发零售
  • [2013-4-14]洛阳市建投节能技术服务有限公司 新版上线
  • [2013-4-11]南阳顽石玉器工作室网站上线
  • ------专业网站设计制作、网站排名优化、建设一流品牌!
    新闻正文 ·您的位置:首页 > 新闻中心 > 技术中心 > 查看新闻

    利用CSS加DIV做的无图片圆角代码

    作者:redroom  来源:redroom  发表时间:2009-8-18 10:23:38  点击:3184

    利用CSS加DIV做的无图片圆角代码
    1.纯CSS制作圆角效果

    这个技术也被大家讨论过多次了,先前我也写过 这样的一篇文章,如果还不了解此项技术的可以去看看。我在这儿就不多讲了。

    2.JQuery实现圆角

    1> 该方法除了引入JQuery的核心包外还必须引入一个JQuery插件”jquery.corner.js”

    2> 用此包的”corner()”方法实现圆角,JQuery代码如下:

    $(function(){
     $('.round').corner("round 10px");
     //.round为你要设置圆角的元选素择器,"round 10px"且直径为10px的圆角。
    });3.CSS 3圆角
    新版本的CSS 3.0加入了元素的圆角属性:我们利用这个属性就可以方便的实现圆角效果了,不过有一点就是老浏览器是不支持CSS 3.0的规则的。必须在支持的浏览器里面才能正确显示。代码如下:

    -moz-border-radius: 20px;     /*FireFox中的圆角属性*/
    -webkit-border-radius: 20px;  /*webkit内核器中的圆角属性*/
    border-radius: 20px;          /*FireFox中的圆角属性*/详细信息看这里

    ok!写完了,最后总结两点:

    对于一般流量不大的网页而言都会用一张图片来实现圆角,简单而且效果好。当然如果你求精的话可以费点神用上面讲到的诸如山顶角等技术来实现圆角。

    对于圆角的使用比较多的页面可以选择用JQuery的插件来实现,这样的话一来方便而且兼容性好。利用率高。所以说 没有最好的方法,只有最适合自己的 。

     

    您的需求

    联系我们

    正确的选择

    金亚洲安全吗