注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

css3——属性(四):多列(Multi-column)之二  

2014-09-16 11:36:40|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
1、column-gap(间隔):
语法:column-gapnormal | <length>
取值说明:
normalnormal的值为1em
<length>由浮点数字和单位标识符组成的长度值。不可为负值。
js语法:object.style.columnGap="40px"
兼容性:
\

Internet Explorer 10 和 Opera 支持 column-rule-color 属性。

Firefox 支持替代的 -moz-column-rule-color 属性。

Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。


实例:
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
}

2、column-rule(列的样式):
语法:column-rule:<length> | <style> | <color>     即:column-rule-width | column-rule-style | column-rule-color
js语法:object.columnRule="3px outset #ff00ff"
兼容性:
\

Internet Explorer 10 和 Opera 支持 column-rule-color 属性。

Firefox 支持替代的 -moz-column-rule-color 属性。

Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。


实例:
.newspaper
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:40px;

-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
}
效果:
css3——属性(四):多列(Multi-column)之二 - 珠玛雅 - 左岸

3、column-rule-width(列的样式宽度):
语法:column-rule-width: thin|medium|thick|length;
取值:
描述
thin定义纤细规则。
medium定义中等规则。 (默认值)
thick定义宽厚规则。
length规定规则的宽度。

js语法:object.style.columnRuleWidth="thin";
兼容性:
\

Internet Explorer 10 和 Opera 支持 column-rule-color 属性。

Firefox 支持替代的 -moz-column-rule-color 属性。

Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。



实例:(必须有column-rule-style  因为column-rule-style默认是none。
.nav{
-moz-column-rule-style:solid; /* Firefox */
-webkit-column-rule-style:solid; /* Safari and Chrome */
column-rule-style:solid;

-moz-column-rule-width:medium; /* Firefox */
-webkit-column-rule-width:medium; /* Safari 和 Chrome */
column-rule-width:medium;

}
4、column-rule-color(列的样式颜色):
语法:column-rule-color: color;   默认为黑色。
js语法:object.style.columnRuleColor="#ff00ff";


实例:(必须有column-rule-style  因为column-rule-style默认是none。
.nav{
-moz-column-rule-color:#ff0000; /* Firefox */
-webkit-column-rule-color:#ff0000; /* Safari and Chrome */
column-rule-color:#ff0000;
-moz-column-rule-style:solid; /* Firefox */
-webkit-column-rule-style:solid; /* Safari and Chrome */
column-rule-style:solid;

}
5、column-rule-style(列的样式类型):
语法:column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;(默认为none)

取值:
描述
none定义没有规则。
hidden定义隐藏规则。
dotted定义点状规则。
dashed定义虚线规则。
solid定义实线规则。
double定义双线规则。
groove定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset定义 3D inset 规则。该效果取决于宽度和颜色值。
outset定义 3D outset 规则。该效果取决于宽度和颜色值。

js语法:object.style.columnRuleStyle="dotted"
兼容性:
\

Internet Explorer 10 和 Opera 支持 column-rule-color 属性。

Firefox 支持替代的 -moz-column-rule-color 属性。

Safari 和 Chrome 支持替代的 -webkit-column-rule-color 属性。


实例:

.nav{

-moz-column-rule-style:solid; /* Firefox */

-webkit-column-rule-style:solid; /* Safari and Chrome */

column-rule-style:solid;

}

 




  评论这张
 
阅读(28)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017