border-radius: 60px/5px 30px 60px 5px；边框粗细不一样
border-radius: 60px/5px 30px 60px 5px；边框粗细不一样。但如果是border-radius: 5px 30px 60px 5px;这种四个值的情况下粗细是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background: #f3f3f3;
overflow: hidden;
position: relative;
}
div{
float: left;
margin-left: 100px;
width: 100px;
height: 200px;
border: 4px solid red;
}
.one{
border-radius: 30px/0 30px 10px 30px;
transform: translate(-25%,25%) rotate(-90deg) ;
}
.two{
border-radius: 60px/5px 30px 60px 5px;
/* border-radius: 5px 30px 60px 5px; */
}
.three{
border-radius:8px 20px 3px 30px ;
}
/*此处补充代码*/
</style>
</head>
<body>
<!--此处补充代码-->
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
正在回答
同学你好，border-radius: 60px/5px 30px 60px 5px;和 border-radius: 5px 30px 60px 5px; 是不一样的，前者是设置了每一个角的水平和垂直方向的半径，相当于如下：
粗细不一样是因为水平和垂直的半径值悬殊有一点大，建议参考如下设置。例如第一个角水平半径为60px，但是垂直半径只有5px 。可以参考如下优化：
第三个盒子也调整一下：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星