前端大本营

HTML5,CSS3,Responsive,资料站

column-rule-width 说明

column-rule-width 属性, 指为内容指定列与列之间分割线的宽度。<规定列之间的宽规则。>

属性值

num + 单位 px, em, ex等 thin 细线 medium 一般(默认值) thick 粗线
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-rule-width </title>
<style>
div.prefix_sample {
width: 600px;

-moz-column-count: 3;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: yellowgreen;

-webkit-column-count: 3;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: yellowgreen;

-o-column-count: 3;
-o-column-rule-style: dotted;
-o-column-rule-width: 5px;
-o-column-rule-color: yellowgreen;

-ms-column-count: 3;
-ms-column-rule-style: dotted;
-ms-column-rule-width: 5px;
-ms-column-rule-color: yellowgreen;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-rule-width
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 列宽与列数 | column-rule-width 列与列之间的分割线宽度指定 —— CSS3 参考 内容布局已关闭评论

column-rule-style 说明

column-rule-style 属性, 指为内容指定列与列之间分割线的样式。<规定列之间的样式规则。>

属性值

none 没有分割线,内容有边框时,边框值优先(默认值) hidden 没有分割线, 内容有边框时,hidden值优先 solid 1条直线 double 2条直线 groove 1条立体凹线 ridge 1条立体凸线 inset ridge相同 outset groove相同 dashed 虚线 dotted 点线
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-rule-style </title>
<style>
div.prefix_sample {
width: 600px;

-moz-column-count: 3;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 5px;
-moz-column-rule-color: yellowgreen;

-webkit-column-count: 3;
-webkit-column-rule-style: dotted;
-webkit-column-rule-width: 5px;
-webkit-column-rule-color: yellowgreen;

-o-column-count: 3;
-o-column-rule-style: dotted;
-o-column-rule-width: 5px;
-o-column-rule-color: yellowgreen;

-ms-column-count: 3;
-ms-column-rule-style: dotted;
-ms-column-rule-width: 5px;
-ms-column-rule-color: yellowgreen;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-rule-style
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 列宽与列数 | column-rule-style 列与列之间的分割线样式指定 —— CSS3 参考 内容布局已关闭评论

column-rule-color 说明

column-rule 属性, 指为内容指定列与列之间分割线的颜色。<规定列之间的颜色规则。>

属性值

色值 #RRGGBB指定颜色
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-rule-color </title>
<style>
div.prefix_sample {
width: 600px;

-moz-column-count: 3;
-moz-column-rule: 5px dotted yellowgreen;

-webkit-column-count: 3;
-webkit-column-rule: 5px dotted yellowgreen;

-o-column-count: 3;
-o-column-rule: 5px dotted yellowgreen;

-ms-column-count: 3;
-ms-column-rule: 5px dotted yellowgreen;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-rule-color
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 列宽与列数 | column-rule-color 列与列之间的分割线颜色指定 —— CSS3 参考 内容布局已关闭评论

column-rule 说明

column-rule 属性, 指为内容指定列与列之间分割线的样式,宽度,颜色。<规定列之间的宽度、样式和颜色规则。> column-rule-width属性, column-rule-style属性, column-rule-color属性分别制定宽度, 样式,及颜色

属性值

‘ column-rule-width 列之间分割线的宽度 (默认值 medium) column-rule-style 列之间分割线的样式 (默认值 none) column-rule-color 列之间分割线的颜色 数值 具体的数量指定
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-rule </title>
<style>
div.prefix_sample {
width: 600px;

-moz-column-count: 3;
-moz-column-rule: 5px dotted yellowgreen;

-webkit-column-count: 3;
-webkit-column-rule: 5px dotted yellowgreen;

-o-column-count: 3;
-o-column-rule: 5px dotted yellowgreen;

-ms-column-count: 3;
-ms-column-rule: 5px dotted yellowgreen;
}
</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-rule
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 列宽与列数 | column-rule 列与列之间的分割线样式 —— CSS3 参考 内容布局已关闭评论

column-gap 说明

column-gap 属性, 指为内容指定列与列之间间隔的时候使用。<规定列之间的间隔。>

属性值

normal 1em(默认值) 数值 具体的数量指定
※<>内容为其他网站转载内容 实例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> column-gap </title>
<style>
div.prefix_sample {
width: 600px;

-moz-column-count: 3;
-moz-column-gap: 50px;

-webkit-column-count: 3;
-webkit-column-gap: 50px;

-o-column-count: 3;
-o-column-gap: 50px;

-ms-column-count: 3;
-ms-column-gap: 50px;
}

</style>

</head>

<body>
<div class="prefix_sample">
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
<p>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p>
</body>
</html>
实例图  column-gap
更多技术问题,可以访问我的技术论坛 也可以回到CSS3参数表查找其他内容
Tags: ,
Posted in 列宽与列数 | column-gap 列与列间隔指定 —— CSS3 参考 内容布局已关闭评论