用js实现CSS圆角生成更新

时间：2023-02-04 11:15:14|栏目：JavaScript代码|点击：次

用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实现Li列表隔行换色效果的方法

栏目：JavaScript代码

下一篇：JavaScript 开发工具webstrom使用指南

本文标题：用js实现CSS圆角生成更新

本文地址：http://www.codeinn.net/misctech/225056.html

更多JavaScript代码

JavaScript代码

用js实现CSS圆角生成更新

阅读排行

推荐教程