为了账号安全,请及时绑定邮箱和手机立即绑定

CSS3 Test: 新border,padding,margin,offset

标签:
CSS3

新边框现在还是草案阶段,还未有相关浏览器规范,目前仅firefox 41以上的版本才支持。

border-inline-start,border-inline-end,border-block-start,border-block-end

兼容性不说了,目前仅firefox 41以上的版本才支持。新边框跟已有的border一样,具备width,style,color三个参数。不一样的是,它取决于写入模式,方向和文本方向定义的值。看名字也能想到,inline文本行,block文本块。每行文字有顺序,上下左右。文本块亦如此。意思就是,border-inline-XX(start/end)是沿着文本行的方向,border-block-XX(start/end)是沿着文本块的方向。常规默认:文本行:left -> right;文本块:top -> bottom。如下图:


webp

border-inline.png

示例代码,点此查看,效果图如下:

webp

效果图.png

padding-inline-start,padding-inline-end,padding-block-start,padding-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的padding完成。

magin-inline-start,margin-inline-end,margin-block-start,margin-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的margin完成。

offset-inline-start,offset-inline-end,offset-block-start,offset-block-end

它也是取决于写入模式,方向和文本方向定义的值。
只是相关效果都能用已有的位移left,right,top,bottom完成。

参考:



作者:恬雅过客
链接:https://www.jianshu.com/p/a979fc03d4e6


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消