新邊框現(xiàn)在還是草案階段,還未有相關瀏覽器規(guī)范,目前僅firefox 41以上的版本才支持。
border-inline-start,border-inline-end,border-block-start,border-block-end
兼容性不說了,目前僅firefox 41以上的版本才支持。新邊框跟已有的border一樣,具備width,style,color三個參數(shù)。不一樣的是,它取決于寫入模式,方向和文本方向定義的值??疵忠材芟氲剑琲nline文本行,block文本塊。每行文字有順序,上下左右。文本塊亦如此。意思就是,border-inline-XX(start/end)是沿著文本行的方向,border-block-XX(start/end)是沿著文本塊的方向。常規(guī)默認:文本行: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完成。