老师麻烦详细讲解一下这个border-radius的用/来控制不同方向的角度到底是怎么回事啊？

<!DOCTYPE html>

<html>

<head>

<style>

body {

background: #f3f3f3;

}

/*此处补充代码*/

div{

width:100px;

height:200px;

border:4px solid red;

display:inline-block;

margin-left:50px;

}

.one{

transform:rotate(90deg);

border-radius:0 20px 30px/30px 30px;

}

.two{

border-radius:0 40px 80px/100px 0;

}

.three{

border-radius:10px 40px/30px;

}

</style>

</head>

<body>

</body>

</html>

我写的这个完全实现不了题目的要求。

完全搞不懂这个/到底是怎么控制边框圆角的变化的，麻烦老师详细解释一下啊！比如不同位置的数值到底是控制的哪个地方的圆角，我看的很迷

源自：项目：CSS3实现汉克狗案例 2-13 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-03-01 09:51:39

同学你好，可以参考如下解析理解：

border-radius属性一个角分为水平方向和垂直方向，例如：

效果：

所以当使用boder-radius属性合在一起写的时候，一个角的两个方向都包括了。如果要设置不一样的值，需要用/隔开。顺序为左上角-右上角-右下角-左下角，例如：

/前面的第一个值和/后面的第一个值是一组，后面以此类推。

同学可以重新调整下border-radius值。一般实际开发中可能会给出圆角值，如果不给出的话，效果基本一致，美观即可，不用担心

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

Aurora_Meteor 提问者 #1

老师请看这样对了吗？ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body { background: #f3f3f3; } /*此处补充代码*/ div{ width:100px; height:200px; border:4px solid red; display:inline-block; margin-left:50px; } .one{ transform:rotate(90deg); border-radius:60px 60px 50px 0/30px 20px 50px 0; } .two{ border-radius:10px 60px 100px 10px/10px 50px 80px 10px; } .three{ border-radius:10px 40px/10px 30px; } </style> </head> <body>  <div class="one"></div> <div class="two"></div> <div class="three"></div> </body> </html>

2020-03-01 18:24:52