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产 ...
随机推荐
- ios开发 UITableViewController
iOS中显示数据列表最常用的一个控件,支持垂直滚动 UITableView的两种内置样式UITableViewStylePlain UITableViewStyleGrouped 数据源(data ...
- android httpClient 支持HTTPS的2种处理方式
摘自: http://www.kankanews.com/ICkengine/archives/9634.shtml 项目中Android https或http请求地址重定向为HTTPS的地址,相信很 ...
- ARR状态监控脚本
##################################################################################### # THIS IS SAMP ...
- VM启用ISO共享
在SCVMM中可以启用ISO共享,如下图: 如果不勾选共享镜像复选框,则vmm会把镜像文件通过网络复制到Hyper-v主机下的虚拟机配置文件夹中 配置步骤如下: 1.新建一个共享文件夹(存放ISO), ...
- Dragons
http://codeforces.com/problemset/problem/230/A Dragons time limit per test 2 seconds memory limit pe ...
- Minimum Size Subarray Sum -- leetcode
题目描写叙述: Given an array of n positive integers and a positive integer s, find the minimal length of a ...
- 为一张PCI卡打通经络的过程
一张PCI卡通过“一转二”的转接卡插在主板上,probe调用失败,日志显示读取配置空间的时候发生了奇偶校验错误,可是使用相同的转接卡把它插在另外一台相同机器的主板上时,却运行正常,这就说明不是转接卡的 ...
- SVN的配置与调试
- phpmailer使用gmail SMTP的方法
终于能够通过phpmailer使用gmail账号发送邮件了phpmailer(现在的版本是1.73)是一个很好用的工具,可以很方便的使用php语言发送邮件,支持smtp及验证,我们一直都用它. 但是, ...
- 解决Visual Studio 2010新建工程时出现『1>LINK : fatal error LNK1123: failure during conversion to COFF: file invalid or corrupt』错误
VS2010在经历一些更新后,建立Win32 Console Project时会出"error LNK1123" 错误. 解决方案为: 第一步:将:项目|项目属性|配置属性|清 ...