位置:电子教程 > CSS3教程 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS3基础样式
CSS3 高级样式
当前阅读教程:CSS3教程 > column-rule-style 属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: column-rule-color 属性 下一篇: column-rule-width 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

紧跟在 -webkit-, -ms- -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

image.png

属性定义及使用说明

column-rule-style属性指定列之间的样式规则。

默认值:

none

继承:

no

版本:

CSS3

JavaScript 语法:

object.style.columnRuleStyle="dotted"

语法

column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

 

描述

none

定义没有规则。

hidden

定义隐藏规则。

dotted

定义点状规则。

dashed

定义虚线规则。

solid

定义实线规则。

double

定义双线规则。

groove

定义   3D grooved 规则。该效果取决于宽度和颜色值。

ridge

定义   3D ridged 规则。该效果取决于宽度和颜色值。

inset

定义   3D inset 规则。该效果取决于宽度和颜色值。

outset

定义   3D outset 规则。该效果取决于宽度和颜色值。

 

实例

指定列之间的样式规则

代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> column-rule-style 属性</title>
<!--定义内部样式-->
<style>
     .mycss
     {
             column-count:3;/*划分成三列*/
             column-gap:40px;/*指定列之间的40个像素的差距*/
             column-rule-style:dotted;/*指定列之间的样式*/
 
             /* Firefox */
             -moz-column-count:3;
             -moz-column-gap:40px;
             -moz-column-rule-style:dotted;
 
             /* Safari and Chrome */
             -webkit-column-count:3;
             -webkit-column-gap:40px;
             -webkit-column-rule-style:dotted; 
     }
</style>
</head>
<body>
 
     <div>
     把div元素中的文本划分成三列:浏览器支持
     表格中的数字表示支持该属性的第一个浏览器版本号。
     紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号
     </div>
 
</body>
</html>
效果图

小白教程网www.2d5.net

image.png


上一篇: column-rule-color 属性 下一篇: column-rule-width 属性
毕业设计网             广告联系QQ:45157718(微信同号)