webkit一些特殊用法

关于webkit一些特殊用法。
<div style="-webkit-border-image: url(file:///D:/1.0/framework/source/palm/themes/Onyx/images/popup.png) 24 24 24 24 stretch stretch;width:250px;height:250px;border-width: 24px;-webkit-box-sizing: border-box;" ></div>

该属性可以使得一张背景图片进行放大缩小。
//定义图片
-webkit-border-image:url(xxx) top right bottom left stretch stretch
//定义边框的的宽度
border-width:top right bottom left

另外还有
-webkit-box-align: center;//居中
box-align 属性用于管理子容器在竖轴上的空间分配方式，共有五个值：start，end，center，baseline 和 stretch。

start ：子容器从父容器顶部开始排列
end ：子容器从父容器底部开始排列
center ：子容器横向居中（有点奇怪）
baseline ：所有子容器沿同一基线排列（很难理解）
stretch ：所有子容器和父容器保持同一高度（默认值）

-webkit-box-pack: center;
box-pack 属性可以用于设置子容器在水平轴上的空间分配方式，它共有四种可能值：start，end，justify 和 center。这些值的含义如下：

start ：所有子容器都分布在父容器的左侧，右侧留空
end ：所有子容器都分布在父容器的右侧，左侧留空
justify ：所有子容器平均分布（默认值）
center ：平均分配父容器剩余的空间（能压缩子容器的大小，并且有全局居中的效果）

-webkit-box-orient: vertical;//垂直居中。horizontal是水平居中//需要和-webkit-box-pack: center;一起使用
-webkit-box-sizing: border-box;//盒子模型，忽略padding值，固定大小，box-sizing: content-box;为不固定大小
等属性用法

-webkit-box-flex: 1 //子容器分布比例方式
比如多个容器，则可以根据比例进行分布调整

以上属性，如果是firefox，需要加-moz-，例如-moz-box-pack.
另外最重要一点，以上属性为盒子模式，需要浏览器支持，并且需要设置display:-webkit-box;