border-radius还是无法理解有5个值的,能再详细的解释下么?

border-radius还是无法理解有5个值的,能再详细的解释下么?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

2回答
怎么都被占用了呢 2018-03-21 18:37:44

斜杠前的一组表示的是四个角水平半径,后面表示的是四个角的垂直半径。

每一组的顺序都是左上角 、右上角、右下角、左下角。定义的值不够4个的话,就从对角取值。

水平半径:4个角对应3个值,那就是左上角10px、右上角20px、右下角40px、左下角20px

垂直半径:4个角对应2个值,那就是左上角20px、右上角50px、右下角20px、左下角50px

怎么都被占用了呢 2017-09-12 10:55:20

border-radius的值不止会有5个哦,创建不对称的角时,就需要用到"/"来表示了。例如:

1、创建四个一样的椭圆角  border-radius:20px/10px;

2、border-radius:10px 20px 30px 40px/20px 50px 30px 10px;   斜杠前面的一组四个值分别表示四个角的水平半径;斜杠后面的一组四个值分别表示四个角的垂直半径。

3、border-radius:10px 20px 40px/20px 50px  斜杠前面和后面每一组分别表示的是四个角水平半径和四个角垂直半径。每一组的顺序都是左上角 、右上角、右下角、左下角。定义的值不够4个的话,就从对角取值。

这样子能理解吗

  • 3、border-radius:10px 20px 40px/20px 50px 分别是指什么呢?
    2018-03-21 17:27:41
  • 1、水平半径:/前 如10px 20px 40px 表示水平上的半径,分别对应10px是左上角的水平半径值 ; 20px是右上角和左下角的水平半径值 ; 40px则是右下角的水平半径值; 2、垂直半径:/之后 所以20px,50px是垂直方向上的半径值;分别对应20px为左上值和右下角的垂直半径值;50px则为右上角和左下角的垂直半径值;
    2018-05-01 15:12:20
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
HTML5&CSS3进阶与常用框架 2018
  • 参与学习       315    人
  • 提交作业       136    份
  • 解答问题       626    个

如果你有H5、CSS3、JS基础,热爱前端并希望在前端应用方面不断进步,那就来吧,本路径为你带来的课程有HTML5进阶、CSS3进阶、JS面向对象、jQ基础、Less等,助你进一步提升前端开发技能

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师