JavaScript代码轻松实现DIV圆角

开发 前端
本文和大家描述一下如何实现DIV圆角,这里介绍一个Javascript程序,这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的。

你对DIV圆角的实现是否了解,这里和大家分享一下简易实现DIV圆角的JavaScript代码,用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV。

简易实现DIV圆角的JavaScript代码

这个程序是个用来制作DIV圆角的开源javascript代码实现,效果和图像制作圆角一样的.它简单,易用,不用修改任何图像就能做到不同半径圆角。用这个代码你可以自由定制自己的DIV,不再是方形了.完全可以实现圆形个性DIV。

用法说明:

以下说明将以一个半径为20像素圆角的DIV为例.

◆解压您下载的文件,上传到您的站点。然后复制代码如下和黏贴它入您的网页的顶头部分。如果您保存了文件到该网页目录外

的任何地方,修正代码中的src值.

代码:

  1. <scripttypescripttype="text/javascript"src="rounded_corners.js"> 
  2.  

◆然后创造一个DIV。如果您已有DIV使用圆角,只要给这个DIV一个id就可以.

代码:

  1. <DIVidDIVid="myDiv"> 
  2.  

◆***我们需要添加一段javascript来预载。在您的网页的顶头部分增加一些代码。

其中,radius表示半径,数值越大,圆角就越大.

◆运行

如果你想搞成奇形怪状的圆角,你可以设置每个角都不同的半径.

例如:

以下是引用片段:

  1. settings={  
  2.  
  3. tl:{radius:20},  
  4.  
  5. tr:{radius:40},  
  6.  
  7. bl:{radius:60},  
  8.  
  9. br:{radius:80},  
  10.  
  11. antiAlias:true,  
  12.  
  13. autoPad:false  
  14.  
  15. }  
  16.  

 或者:

  1. settings={  
  2.  
  3. tl:{radius:20},  
  4.  
  5. tr:false,  
  6.  
  7. bl:false,  
  8.  
  9. br:{radius:80},  
  10.  
  11. antiAlias:true,  
  12.  
  13. autoPad:false  
  14.  
  15. }  
  16.  

 提示:tl-左上角tr=右上角bl=左下角br=右下角
 

【编辑推荐】

  1. CSS样式实时切换技巧剖析
  2. CSS中margin边界叠加问题及解决方案
  3. CSS样式表高效使用八大秘诀
  4. 创建和插入CSS样式表秘笈
  5. 实现CSS垂直居中的五大方法及优缺点

 

 

责任编辑:佚名 来源: yesky.com
相关推荐

2010-09-14 12:58:41

DIV+CSS圆角

2010-09-07 09:30:25

DIV弹出jQuery

2017-03-09 18:00:30

JavaScript代码

2010-09-09 08:52:19

JavascriptDIV

2010-08-30 10:09:07

JavaScriptDIV

2010-08-26 16:19:41

DIV圆角

2010-09-28 12:59:45

JavaScriptDOM

2010-08-30 10:03:13

2010-09-16 12:48:17

JavascriptIE6

2010-09-14 10:21:24

Javascriptdiv

2017-08-28 16:01:59

前端JavaScript学习途径

2020-05-06 19:57:09

代码开发编码

2011-07-08 15:08:16

iPhone 图片

2016-03-29 10:18:48

Android图片代码

2010-10-09 11:09:32

JavaScript弹

2009-07-01 14:23:46

JavaScript异

2010-09-09 09:16:27

JavaScriptdiv

2011-03-15 10:08:22

2010-08-30 13:09:40

DIVCSS

2010-07-16 10:31:02

Batch Telne
点赞
收藏

51CTO技术栈公众号