用js实现CSS圆角生成更新

更新时间：2007年05月03日 00:00:00 作者：

用js生成任意圆角,下一步就是加入直角导角,圆角导外,外圆角导个,还有边框处理,阴影生成,还有柔化处理都是以后的重点和难点.

<div id="modul">  <div id="contentbox">  <div id="content" style="margin:40px;">中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺中工工基 人遥仍失遥士大夫工士大夫花样百出地苛夺花样百出地人测试有的我不想信工大师傅苛夺工士大夫花样百出地模压 械夺棋栽夺苛夺棋地花样百出地模压械夺棋栽夺</div></div>  </div>  <script type="text/javascript">   makeroalj("modul","contentbox",60,400);   function makeroalj(modulid,contentid,r,width){    this.setr=r;    var yj=document.getElementById(modulid);    yj.style.position="relative";    yj.style.width=width?width+"px":"100%";    yj.style.overflow="hidden";    var contentbox=document.getElementById(contentid);    contentbox.style.position="absolute";    for(y=this.setr;y>=1;y--){     var l=document.createElement("div");    setstyle(l,y);    yj.appendChild(l);    }    var box=document.createElement("div");    box.style.backgroundColor="#FFCC00";    yj.appendChild(box);        for(y=1;y<=this.setr;y++){     var l=document.createElement("div");    setstyle(l,y);    yj.appendChild(l);    }    box.style.height=(contentbox.clientHeight-this.setr*2)+"px";    //设置样式    function setstyle(obj,y){     l.innerHTML="&nbsp;";    l.style.height="1px";    l.style.overflow="hidden";    l.style.backgroundColor="#FFCC00";    l.style.margin="0 "+(this.setr-Math.floor(Math.sqrt(this.setr*this.setr-y*y)))+"px";      }   }  </script>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

用js实现CSS圆角生成更新

微信小程序实现列表条件筛选
这篇文章主要为大家详细介绍了微信小程序实现列表条件筛选，筛选框的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
EasyUI的DataGrid绑定Json数据源的示例代码
本篇文章主要介绍了EasyUI的DataGrid绑定Json数据源的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
JavaScript中定时控制Throttle、Debounce和Immediate详解
大家可能都知道JavaScript遵循事件驱动的编程范例，这意味着一些行为可以激活一些响应，并且这些响应仅在发生特定的行为时才被激活。这篇文章将给大家详细介绍JavaScript中的定时控制Throttle、Debounce和Immediate，有需要的朋友们可以参考借鉴，下面来一起看看吧。
2016-11-11
js 多种变量定义(对象直接量，数组直接量和函数直接量)
js 多种变量定义(对象直接量，数组直接量和函数直接量),大家可以参考下，对于以后学习js 面向对于与json操作会有帮助。
2010-05-05
JS实现动态添加外部js、css到head标签的方法
这篇文章主要介绍了JS实现动态添加外部js、css到head标签的方法,涉及javascript针对页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
2019-06-06
解决layui的table插件无法多层级获取json数据的问题
今天小编就为大家分享一篇解决layui的table插件无法多层级获取json数据的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
1分钟快速了解js实现下载文件功能的4种方式
在前端开发中,我们经常需要实现文件下载功能,例如下载用户上传的图片、用户生成的文件等,这篇文章主要给大家介绍了关于如何通过1分钟快速了解js实现下载文件功能的4种方式,需要的朋友可以参考下
2024-03-03
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
这篇文章主要介绍了《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史,需要的朋友可以参考下
2015-01-01
如何用JS模拟实现数组的map方法
这篇文章主要介绍了如何用JS模拟实现数组的map方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下
2020-07-07
vue-router重定向不刷新问题的解决
本篇文章主要介绍了vue-router重定向不刷新问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06

用js实现CSS圆角生成更新

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具