当前位置: 代码迷 >> Web前端 >> webkit一些非一般用法
  详细解决方案

webkit一些非一般用法

热度:100   发布时间:2012-09-20 09:36:50.0
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;

  相关解决方案