CSS 的 border-radius

CSS的border-radius

border-radius: 10px 10px 10px 10px;
注意: 每个半径的四个值的顺序是:左上角,右上角,右下角,左下角。如果只有三个值则依次为 左上角,右上角和左下角,右下角,如果只有两个值则依次为左上角和右下角,右上角和左下角。
上面的写法等效于

	border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;

可以使用 border--radius 属性,指定每个角的半径。
border-
-radius: a b; 两个属性值依次分别代表水平半径和垂直半径。如果只写一个半径则代表两个半径相同。
在这里插入图片描述

border-top-left-radius: 10px;
border-top-right-radius: 10px;
以这两个属性的为例,如果两个属性的水平半径之和超出了元素的宽度,那么两个圆的圆心在同一条直线上,这条直线的位置处于将元素的边按照两圆的半径占据的比例分割线上。当半径超出的宽度的时候,圆心处于位置边上不再移动,开始移动圆与另一个边的交点。(<---- 推测)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值