border的应用

Posted 2020-09-06

有一对幼兔，幼兔1个月后长成小兔，小兔1个月后长成成兔并生下一对幼兔，问几年后有多少对兔子，幼兔、小兔、成兔对数分别是多少。

幼兔 1 小兔 0 成兔 0
幼兔 0 小兔 1 成兔 0
幼兔 1 小兔 0 成兔 1
幼兔 1 小兔 1 成兔 1
幼兔 2 小兔 1 成兔 2
幼兔 3 小兔 2 成兔 3
幼兔 5 小兔 3 成兔 5

当前月份幼兔 = 上个月的成兔+上月小兔
当前月份小兔 = 上月幼兔
当前月份成兔 = 上月成兔+上月小兔

 

 

 

var count=prompt("请输入月份");
var a=1;
var b=0;
var c=0;

for(var i=1; i<=count; i++){
var a_=a
var b_=b
var c_=c

a=b_+c_;
b=a_;
c=c_+b_;

}
alert(a+"~~~"+b+"~~~"+c)

 

布局出该效果

提示：使用DIV的border样式，调整边框粗细出现该效果

，保留上边框，其它三个方向的边框需设置：border-left:100px solid transparent;来透明掉。

 

 

#d{ width:0px;

       height:0px;

        border:100px solid #00F ;

          border-left:100px solid #FFF;
             border-right:100px solid #FFF;

               border-bottom:100px solid #FFF;
}

 

<div id="d"></div>

 

布局出该效果

提示：DIV旋转使用的样式：transform:rotate(45deg)；旋转45度

#a{ width:100px;

        height:100px;

         border:#00F solid 20px;
            border-right:#FFF;

               border-top:#FFF;

                 transform:rotate(45deg)}

<div id="a"></div>