webkit一些特殊用法

关于webkit一些特殊用法。

<divstyle="-webkit-border-image:url(file:///D:/1.0/framework/source/palm/themes/Onyx/images/popup.png)24242424stretchstretch;width:250px;height:250px;border-width:24px;-webkit-box-sizing:border-box;"></div>

该属性可以使得一张背景图片进行放大缩小。

//定义图片

-webkit-border-image:url(xxx)toprightbottomleftstretchstretch

//定义边框的的宽度

border-width:toprightbottomleft

另外还有

-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;