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. golang 移动应用例子 example/basic 源码框架分析

    条件编译 我们在源码中可以看到2个文件: main.go 和 main_x.go 这两个包名都是 package main , 都有 main 函数. 不会冲突么? 答案是不会的, main_x.go ...

  2. gradle android

    从github下载两个开源项目: PagerSlidingTabStrip    |    Android-Universal-Image-Loader-master https://github.c ...

  3. 开一个帖子,等有时间了写写如何用shapelib创建点线面等shp图层

    开一个帖子,等有时间了写写如何用shapelib创建点线面等shp图层  C#操作shapelib的实例 http://files.cnblogs.com/yuxuetaoxp/Shapelib--D ...

  4. nyoj 62 笨小熊

    点击打开链接 笨小熊 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 笨小熊的词汇量很小,所以每次做英语选择题的时候都很头疼.但是他找到了一种方法,经试验证明,用这种方法 ...

  5. Eclipse不能进入断点

    如题:Eclipse不能进入断点,可能是项目没有build,如果是maven项目,clean,在maven install就可以了

  6. MapHttpRoute

    http://aspnetwebstack.codeplex.com/SourceControl/latest#src/System.Web.Http/HttpRouteCollectionExten ...

  7. 读写ZIP文件

    String zipFile = /D:/+ ".zip";   StringOperator.zip(filePath, zipFile);   InputStream is = ...

  8. Redis数据持久化之RDB持久化

    因为Redis服务器将数据存储在内存里面,而一旦服务器被关闭或者运行服务器的主机本身被关闭的话,存储在内存里面的数据就会消失不见: 如果我们仅仅是将redis用作缓存的话,那么这种数据丢失带来的问题并 ...

  9. UVA12653 Buses

    Problem HBusesFile: buses.[c|cpp|java]Programming competitions usually require infrastructure and or ...

  10. [原创] IIS7下顶级域名301跳转到WWW域名

    百度搜索了众多方法,居然没有一个全面的IIS7下301域名跳转能用的教程,最终自己研究出了个可以用的供大家参考.1.绑定域名01ruodian.cn www.01ruodian.cn到空间: 2.在I ...