CSS3 Test: 新border,padding,margin,offset

新边框现在还是草案阶段，还未有相关浏览器规范，目前仅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。如下图：

border-inline.png

示例代码，点此查看，效果图如下：

效果图.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完成。

参考：

• border-inline-start

• CSS3 Test

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