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