CSS3圆角边框

(CSS3,需要考虑兼容性的问题)

border-radius: 像素或者百分比;(盒子为正方形时:一半像素或者50% 时成为一个标准的圆)

  • border-radius: 左上 右上 右下 左下; -—— 给定四个值时,可以控制四个角的圆形程度不同
  • border-radius: 左上右下 右上左下; (即对角线) —— 只给定两个值时
  • border-radius: 左上 右上和左下 右下 —— 给定三个值时
  • 如果想实现椭圆的效果:border-radius: 水平方向的半径 / 垂直方向的半径 —— 使用 / ,长方形变为椭圆,水平方向的半径为长方形宽度的一半,垂直方向的半径是长方形高度的一半
  • 如果想单独为某一个角设置圆角:
    • border-top-left-radius:设置左上角
    • border-top-right-radius:设置右上角
    • border-bottom-left-radius:设置左下角
    • border-bottom-right-radius:设置右下角
  • 如果想设置四个角的不同方向上的不同圆角值
    • border-radius: 左上的水平 右上的水平 右下的水平 左下的水平 / 左上的垂直 右上的垂直 右下的垂直 左下的垂直
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值