CSS column-rule-style属性用于在多列布局中指定列与列之间通过column rule属性设置的分隔线的样式。column-rule是列与列之间的一条垂直分隔线,你可以使用column-rule-width属性来设置分隔线的宽度,使用column-rule-color属性来设置分隔线的颜色,使用column-rule-style属性来设置分隔线的线条样式。

.浏览器支持

.语法

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

.参数

  • none:不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
  • hidden:不显示列与列之间的分隔线。设置的分隔线宽度和颜色属性会被忽略。
  • dotted:列之间的分隔线显示为圆角的矩形。圆角的半径等于分隔线宽度的一半。
  • dashed:列之间的分隔线显示为直角矩形组成的虚线。
  • solid:列之间的分隔线显示为一条笔直的直线。
  • double:列之间的分隔线显示为两条直线,两条直线之间有一些间隙。两条直线的宽度和间隙宽度的总和等于column-rule-width属性指定的宽度。
  • groove:列之间的分隔线显示为内陷浮雕效果。
  • ridge:列之间的分隔线显示为外凸浮雕效果。
  • inset:列之间的分隔线显示为内斜面效果。
  • outset:列之间的分隔线显示为外斜面效果。

  column-rule-style属性的初始值为none

.应用范围

  column-rule-style属性可以应用在所有多列布局的元素上。

    在一个元素应用column-rule-style属性的代码如下

.columns {
    columns: 12em;
    column-rule-width: 5px;
     column-rule-style: solid;
    column-rule-color: #0099CC;
}                             

CSS3 column-rule-style 属性的更多相关文章

  1. CSS3 column属性

    css3 column属性的应用 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta c ...

  2. 解决Struts2.2.20版本的标签不支持style属性的问题

    我先把Exception错误信息贴出来:org.apache.jasper.JasperException: /WEB-INF/jsp/topicAction/addUI.jsp (line: 40, ...

  3. CSS3 新增的文本属性

    一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...

  4. Selectivizr-让IE6~8支持CSS3伪类和属性选择器

    一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...

  5. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  6. CSS3:布局display属性的flex(弹性布局)

    CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...

  7. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  8. dede文章调用时过滤调 body里面的style属性和值

    dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...

  9. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  10. JS中style属性

    解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...

随机推荐

  1. NAND flash cache编程

    PROGRAM PAGE CACHE MODE 0x80-0x15: CACHE编程实际上是标准的页编程命令的带缓冲编程模式,编程开始是发布SERIAL DATA INPUT(0x80)命令,随后是5 ...

  2. 对json数据进行类似sql查询

    添加js引用:jsonsql-0.1.js 通过下面列子得到一个json类型的结果 Example: jsonsql.query("select * from json.channel.it ...

  3. rhel5 新建用户提示:the home directory already exists.

    rhel5 新建用户提示:the home directory already exists.(as4不存在这个问题) 环境如下: [oracle@rhel5 ~]$ df -hFilesystem  ...

  4. 【转载】s3c2440裸机开发调试环境(MDK4.6,Jlink v8,mini2440)

    用于arm裸机程序开发的IDE基本有 以下3个:MDK,IAR,还有ADS.具体它们的具体情况在这里我就不多说了,百度一下就明白了.由于之前开发c51,stm32时候都使用了MDK开发环境,而且MDK ...

  5. 用js控制选项卡的隐藏与显示

    通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏 <form action="" method="post"> <div&g ...

  6. X60的BIOS白名单-黑苹果之路

    一时兴起装起了黑苹果,用了最古老的thinkpad X60.装完了才发现无线网卡是硬伤,无法驱动,只有淘了个博通的无线网卡,但商家告诉我需要搞定白名单. 于是在商家的帮助下折腾半天,终于搞定. 1.在 ...

  7. x86_64平台编译链接汇编程序

    assemble: nasm -f elf32 sample.asm -l sample.lst link: ld -m elf_i386 -o test sample.o io.o

  8. TextView里的文 html

    一.[Android实例]实现TextView里的文字有不同颜色 转eoe:http://www.eoeandroid.com/thread-4496-1-1.html import android. ...

  9. (旧)子数涵数·PS——替换颜色

    一,老规矩,下载素材(老样子,还是美美的少女) 二.打开PS,并打开素材. 三.复制一个图层,快捷键Ctrl+J(好习惯) 四.使用"替换颜色"命令,弹出对话框. 五.选择人物衣服 ...

  10. AD转换精度的计算

    声明原文来源于:http://wenku.baidu.com/view/1e6d8f3083c4bb4cf7ecd1c2.html 讨论AD转换分辨率的算法(zt) (1)在总长度为5米的范围里,平均 ...