jquery插件corner实现圆角边框的方法

本文实例讲述了jquery插件corner实现圆角边框的方法。分享给大家供大家参考。具体如下：

代码如下:

<!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">
<head>
   <title>jQuery Corners</title>
   <script type="text/javascript" src="jquery.js"></script>
   <script type="text/javascript" src="jquery.corners.min.js"></script>
   <script type="text/javascript">
   $( function(){$('.roundedd').corners();}) 
   </script>
   <style type="text/css">
   .roundedd 
   { 
      background-color:#eeeeee; 
   } 
   </style>
</head>
<body>
<div style="" class="roundedd">
class="rounded {10px}"
</div>
</body>
</html>

这里测试了一下发现一个问题bug：若background-color:#eeeeee;写成background-color:red;或 background-color:yellow;在火狐没问题，如果是IE的话就看不到效果了，所以建议用颜色RGB代码。
 
演示地址为：
 
http://www.malsup.com/jquery/corner/

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • jquery photoFrame 图片边框美化显示插件

    三种样式都是用photoframe实现的,我会继续丰富其样式,目标是拿来即用,简化页面代码.使用: 复制代码 代码如下: <link type="text/css" rel="stylesheet" href="stamp/style.css" /> <script type="text/javascript" src="jquery-1.4.2.min.js"></scrip

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • jquery加载页面的方法(页面加载完成就执行)

    1.$(function(){ $("#a").click(function(){ //adding your code here }); }); 2.$(document).ready(function(){ $("#a").click(function(){ //adding your code here }); }); 3.window.onload = function(){ $("#a").click(function(){ //add

  • jquery(1.3.2) 高亮选中图片边框

    jquery(1.3.2) 高亮选中图片边框

    因为需要加载文件,建议刷新下 高亮选中图片边框 #mainboard img{ border:1px solid #cccccc; width:88px; height:31px; cursor:pointer; } $(function(){ $("#mainboard img").bind("click",function(){ $(this).css("border","1px solid red").siblings(

  • jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法

    往带有png图的类里加红色字的部分 复制代码 代码如下: background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=sca

  • jquery ajax提交表单数据的两种方式

    之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐.学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery.Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值).在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练"打字水平"的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!

  • JQuery实现鼠标移动到图片上显示边框效果

    复制代码 代码如下: 以下为程序代码:<!DOCTYPE html/> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script> <script type="text/javascript"> $(function() { $(".v&quo

  • jquery给图片添加鼠标经过时的边框效果

    一哥们儿要给图片添加鼠标经过时的边框效果,可惜出发点错了,直接加在了IMG外的A标签上致使 鼠标经过时图片产生塌陷,实则应该将边框控制直接加在IMG标签上即可 错误代码如下:注意红色部分设置 (出发点就错了) 复制代码 代码如下: <html> <head> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></s

  • jQuery实现边框动态效果的实例代码

    jQuery实现边框动态效果的实例代码

    话不多说.静态效果图如下 实代码如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .myDiv{ width: 300px; height: 200px; border: 1px solid rgba(0,0,0,0.2); margin: 50px ; position: relative;

  • jquery 如何动态添加、删除class样式方法介绍

    取与设置样式 获取class和设置class都可以使用attr()方法来完成.例如使用attr()方法来获取p元素的class,JQuery代码如下: 复制代码 代码如下: var p_class = $("p").attr("class"); //获取p元素的class [html] 使用attr()方法来设置p元素的class,JQuery代码如下: [code] 1 $("p").attr("'class", "

  • JQuery拖动表头边框线调整表格列宽效果代码

    类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放开鼠标,表格列宽会被调整.最近比较空闲,便自己动手尝试实现,在此分享下小小的成果. 首先需要如图所示的鼠标图标文件,在自己的硬盘中搜索*.cur,肯定能找到. 为了能在所有需要该效果的页面使用,并且不需要更改页面任何HTML,我把所有的代码整合在 $(document).ready(function() {}); 中,并写入一个独立的JS文件.

随机推荐