这个用比值设置圆角到底怎样理解啊，老师？

慕仔1324260 2020-02-24

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

21

收起

2回答

好帮手慕码回答被采纳获得+3积分 2020-02-24 18:43:26

同学你好，border-radius属性：一个圆角分为水平方向和垂直方向。例如：

效果：

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

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

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

慕仔1324260 提问者 #1

老师谢谢您的解答，但是还有一个问题，如果我只是第三个右下角两个方向不一样，其它三个角两个方向一样，如果按照您的讲解应该是border-radius:20px 30px 40px 50px/20px 30px 50px 50px。这样写感觉挺麻烦的，有没有针对这种情况的简便写法?只是其中个别角两个方向不一样，其它角两个方向一样？

2020-02-24 20:09:27

好帮手慕码 2020-02-25 09:45:52

同学你好，没有简写的方法哦，不过这种前/后方式在实际开发中不常用，简单的了解一下即可。

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

相似问题

border-radius关于两组值得设置

老师，图片圆角的问题

关于这朵云

渐变的两个圆心一致好理解，但是老师这里的例子不太理解

老师不知道为什么无法拖动

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载