jquery - 在 jquery 中创建一个随机边框

Question

我创建了一个随机数，在每次加载页面时，我的 div 的边框半径都在变化:

<script>
$(".card-body").each(function(){
var rand = Math.floor(Math.random() * 100) + 1;
$(this).css( {  borderRadius:  rand } );
});
</script>

如何像在这个 css 中那样设置边框半径？

border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;}

Answer 1

使用代码如下:

循环 8 次并添加 (+=) 到 rand 我添加的第 4 个数字之后每次随机的数字 /

$(".card-body").each(function(){
var rand="";
for(var i=0;i<8;i++)
{
 rand += Math.floor(Math.random() * 255) + 1 + "px";
 if(i!=3)
  rand +=" ";
 else
   rand +="/ ";
 }
$(this).css( {  borderRadius:  rand } );
});

.card-body-static{
border:1px solid black;
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
margin-bottom:15px;
}

.card-body{
border:1px solid black;
margin-bottom:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card-body-static">static</div>

<div class="card-body">random</div>
<div class="card-body">random 2</div>