js实现圆角

h5中已经可以使用border-radius来进行圆角的设计,但是圆角的支持程度就目前的浏览器占比来看,圆角还需要对Ie比较早的版本进行兼容,针对这个问题,有人在网络上面写了一个关于js的实现圆角,我拿过看了一下,看懂了写一个笔记。以下是代码:


<div id="modul">  

<div id="contentbox">  

<div id="content" style="margin:40px;">这是圆角的js实现方式,你知道么?</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=" ";  

  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> 


你可能感兴趣的:(JavaScript,js,圆角)