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. JDK环境变量中dt.jar、tools.jar等变量值的作用

    变量名:CLASSPATH 变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar; tools.jar: 工具类 库,它跟我们程序中用到的 基础 ...

  2. 写代码的自动提示是怎么出来的...我的WebStorm中不能自动提示Bootstrap中的样式呢

    首先开启自动提示 File -> Settings ->Editor ->Code Completion ->Preselect the first suggestion:,将 ...

  3. Excel粘贴到textarea换行符替换

    复制到→ Excel列表的内容复制到textarea中后,前台取到的文本是这样的: chrome监视显示 console.log输出 现在需要将excel中的每行数据拼接起来用“;”隔开,方法如下: ...

  4. [HDU 4417] Super Mario (树状数组)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 题目大意:给你n个数,下标为0到n-1,m个查询,问查询区间[l,r]之间小于等于x的数有多少个 ...

  5. Count the Colors(线段树染色)

    Count the Colors Time Limit:2000MS    Memory Limit:65536KB    64bit IO Format:%lld & %llu Submit ...

  6. systemstate dump 介绍

    systemstate dump 介绍 By Janezhang-Oracle on 十二月 13, 2012 当数据库出现严重的性能问题或者hang了的时候,我们非常需要通过systemstate ...

  7. MySQL数据的主从复制、半同步复制和主主复制详解-转

    一.MySQL复制概述 ⑴.MySQL数据的复制的基本介绍 目前MySQL数据库已经占去数据库市场上很大的份额,其一是由于MySQL数据的开源性和高性能,当然还有重要的一条就是免费~不过不知道还能免费 ...

  8. Mysql 自动增长 重置

    重置 MySQL 自增列 AUTO_INCREMENT 初时值 注意, 使用以下任意方法都会将现有数据删除. 方法一: delete from tb1; ALTER TABLE tbl AUTO_IN ...

  9. MySQL 密码修改

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...

  10. 翻译:wiki中的business logic词条

    Business logic 业务逻辑 From Wikipedia, the free encyclopedia 来自Wikipedia,自由的百科全书 In computer software, ...