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产 ...
随机推荐
- java request判断微信客户端访问
微信客户端访问时候user-agent信息如下: Mozilla/5.0 (Linux; Android 5.0.1; M040 Build/LRX22C) AppleWebKit/537.36 (K ...
- C#- 操作Ini文件
以前习惯了使用.NET中的WEB.CONFIG或者APP.CONFIG,最近在做项目的时候遇到了些问题,发现没办法使用这些CONFIG文件.一开始我的做法是建一个文本文件,自己定规律,自己写方法去写新 ...
- iOS CoreData(2)
上面一篇文章介绍了coredata的有关基本概念,由于大部分是参考别人文章中的内容,所以感觉有点虚,而且估计也是比较难以理解,下面这篇文章通俗一点说说学习coredata后的一些理解,然后给出一个简单 ...
- careercup-数学与概率 7.6
7.6 在二维平面上,有一些点,请找出经过点数最多的那条线. 解法: 类似于leetcode:Max Points on a Line 我们只需在任意两点之间“画”一条无限长的直线(也即不是线段),并 ...
- HD1285(拓扑排序)
package cn.hncu.dataStruct.search.topSort; import java.util.Scanner; public class Hdu1285 { static S ...
- UIPickerView(选择器)
UIPickerView也是一个选择器控件,它比UIDatePicker更加通用,它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活. UIPicke ...
- HDFS的java客户端操作代码(Windows上面打jar包,提交至linux运行)
1.通过java.net.URL实现屏幕显示demo1文件的内容 package Hdfs; import java.io.InputStream; import java.net.URL; impo ...
- rndc: connect failed: 127.0.0.1#953: connection refused
[root@localhost sbin]# ./named -v bind 9.5.1-p3-v3.0.9 问题现象: [root@localhost sbin]# ./rndc flush -p ...
- .net中下载文件的方法(转)
.net中下载文件的方法 一.//TransmitFile实现下载 protected void Button1_Click(object sender, EventArgs e) ...
- CDOJ-10(栈的应用)
In Galgame We Trust Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Othe ...