Jquery div边框大全
网址
http://jquery.malsup.com/corner/
jQuery Corner是一款jQuery的插件,最初由Dave Methvin开发,但后在Malsup同志的协助下,进行了一些重要的改进。现在项目放在github上,当然为了方便,本文会以附件的形式提供该插件,但要想得到最新版,请到项目的github上拿。
点击(此处)折叠或打开
- <html>
- <head>
- <style type="text/css">
- div{
- width:350px;
- height:200px;
- background-color: #6af;
- }
- </style>
- </head>
- <body>
- <div></div>
- </body>
- </html>
效果如下:

点击(此处)折叠或打开
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.corner.js"></script>
- <style type="text/css">
- div{
- width:350px;
- height:200px;
- background-color: #6af;
- }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </html>
点击(此处)折叠或打开
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.corner.js"></script>
- <script type="text/javascript">
- $(function(){
- $("div").corner();
- });
- </script>
- <style type="text/css">
- div{
- width:350px;
- height:200px;
- background-color: #6af;
- }
- </style>
- </head>
- <body>
- <div>
- </div>
- </body>
- </html>


点击(此处)折叠或打开
- <script type="text/javascript">
- $(function(){
- $("div").corner("notch");
- });
- </script>
就可以得到这个效果:

点击(此处)折叠或打开
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.corner.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#mydiv").corner('bevel');
- });
- </script>
- <style type="text/css">
- #mydiv{
- width:350px;
- height:200px;
- background-color: #6af;
- }
- </style>
- </head>
- <body>
- <div>
- <div id="mydiv"></div>
- </div>
- </body>
- </html>
看图吧:


点击(此处)折叠或打开
- $("#mydiv").corner('bevel bottom');
于是,就只有底部产生notch角了。

点击(此处)折叠或打开
- $("#mydiv").corner('bevel bottom 50px');
惊奇的图像如下:

点击(此处)折叠或打开
- $("#mydiv").corner('top 30px').corner('bevel bottom 50px');
没错,就是用两句corner。当然你可以完全使用四个corner把各个角都自定义。

点击(此处)折叠或打开
- <html>
- <head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.corner.js"></script>
- <script type="text/javascript">
- $(function(){
- $("#mydiv p").corner('round 8px').parent().css('padding','8px').corner('round 14px');
- });
- </script>
- <style type="text/css">
- #mydiv{
- width:360px;
- background-color: #600;
- }
- #mydiv p{
- width:350px;
- height:200px;
- background-color: #6af;
- }
- </style>
- </head>
- <body>
- <div>
- <div id="mydiv"><P></p></div>
- </div>
- </body>
- </html>
就会这样:

Jquery div边框大全的更多相关文章
- 十分钟玩转 jQuery、实例大全(参考自博主索宁)
十分钟玩转 jQuery.实例大全(参考自博主索宁) 一.简介 书写规则 支持链式操作: 在变量前加"$"符号(var $variable = jQuery 对象): 注:此规定并 ...
- jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery的基本事件大全
].name); });jQuery.getScript( url, [callback] ) 使用GET请求javascript文件并执行. $.getScript(”test.js”, funct ...
- 实现鼠标悬停,div勾画div边框的动画
鼠标悬浮,边框div边框的动画样式,效果图如下: 首先定义div及其样式: <style> .show { width:300px; height:200px; border:1px so ...
- C#-WebForm-设置div边框为内边框:box-sizing:border-box;
设置div边框为内边框:box-sizing:border-box;
- CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法
CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...
- 转载 常用Jquery插件整理大全
常用Jquery插件整理大全 做项目的时候总是少不了要用到Jquery插件,但是Jquery插件有太多,每次都要花费一些时间,因此本人就抽时间整理了一些Jquery插件,每个插件都有Demo或者是使用 ...
- css美化Div边框的样式实例*(转载)
css美化Div边框的样式实例 很多时候如果不是用了很多样式,很难把边框修饰得好看,看了一篇博文,觉得真的挺漂亮,也挺好看. 转载的博文地址 将这段美化的css代码 border:1px soli ...
- 十分钟玩转 jQuery、实例大全
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQuery对象 jQuery产 ...
随机推荐
- [置顶] 深入浅出Spring(一)Spring概述
现在很多的企业级项目中基本上都会用到了Spring框架,那么为什么会出现Spring,Spring是什么?这次的博文我主要为大家简单介绍一下Spring. Java EE优缺点 我们都知道在2003年 ...
- Android将应用log信息保存文件
相信大家在做应用调试的时候,不可能时时通过USB线连着电脑去查看log信息,所以,将应用的log信息保存到手机本地就很有必要了,有助我们从这些log信息中提取有用的部分,以解决一些bug,下面我把网上 ...
- MySQL 复制+快照恢复误删除操作实验测试
下面假定2个场景: 场景1:主从架构,没有延迟,某DBA误操作:drop database [复制+快照:在线备份]场景2:存在不确定性或者风险性较大的操作,如升级测试,大表变更[啥事都在快照上折腾, ...
- Yum出错Error: Cannot find a valid baseurl for repo: base(转)
centos yum 错误 Error: Cannot find a valid baseurl for repo: base 装了个CentOS 6.x,使用yum时出现了下面的错误提示.Loade ...
- 关机相关(shutdown,reboot)
慣用的關機指令: shutdown 由於Linux的關機是那麼重要的工作,因此除了你是在主機前面以tty7圖形介面來登入系統時, 不論用什麼身份都能夠關機之外,若你是使用遠端管理工具(如透過piett ...
- arcgis通过 Python 使用工具 获得结果信息
通过 Python 使用工具 ArcGIS 10 每个地理处理工具都具有一组固定的参数,这些参数为工具提供执行所需的信息.工具通常具有定义一个或多个数据集的输入参数,这些数据集一般用于生成新的输出数据 ...
- 从数组中随机取n条不重复的数据
工作中经常遇到有关数组的一些操作 1. 从数据中随机取n条不重复的数据 (PS:下面的S.each是KISSY.each方法,大家可以改为for循环) /* 1 从数组arr中随机取n条不重复的数据 ...
- skynet启动过程_bootstrap
这遍摘自skynet 的wiki skynet 由一个或多个进程构成,每个进程被称为一个 skynet 节点.本文描述了 skynet 节点的启动流程. skynet 节点通过运行 skynet 主程 ...
- Java并发——线程安全、线程同步、线程通信
线程安全 进程间"共享"对象 多个“写”线程同时访问对象. 例:Timer实例的num成员,即add()方法是用的次数.即Timer实例是资源对象. class TestSync ...
- elasticsearch学习一、安装和配置
原文链接:http://jingyan.baidu.com/article/48206aead42b53216bd6b372.html ElasticSearch是一个基于Lucene的搜索服务器.它 ...