CSS3 column-rule-style 属性
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 属性的更多相关文章
- CSS3 column属性
css3 column属性的应用 1.案例源码 <!DOCTYPE html><html lang="en"><head> <meta c ...
- 解决Struts2.2.20版本的标签不支持style属性的问题
我先把Exception错误信息贴出来:org.apache.jasper.JasperException: /WEB-INF/jsp/topicAction/addUI.jsp (line: 40, ...
- CSS3 新增的文本属性
一.CSS1&2中的文本属性(W3C标准) text-indent CSS1 检索或设置对象中的文本的缩进 letter-spacing CSS1 检索或设置对象中的文字之间的间隔 word- ...
- Selectivizr-让IE6~8支持CSS3伪类和属性选择器
一.下载和demo 下载: 您可以狠狠地点击这里:selectivizr-1.0.0.zip(右键-[目标|链接另存为] 9.24K) demo: 您可以狠狠地点击这里:Selectivizr部分属性 ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- CSS3:布局display属性的flex(弹性布局)
CSS3:布局display属性的flex(弹性布局) 一.简介 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.设为Flex布局以后, ...
- CSS3 column 分栏
column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...
- dede文章调用时过滤调 body里面的style属性和值
dede 发布文章的时候会在里面的标签中添加一些style 属性,现在改网站想去掉这些属性和里面的值,因为文章太多所以就用下面的方法 \include\arc.listview.class.php 在 ...
- css字体样式(Font Style),属性
css字体样式(Font Style),属性 css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...
- JS中style属性
解决办法:1.先定义一个CSS规则,然后this.className=''2.document.getElementByIdx_x("a").style.cssText=" ...
随机推荐
- POJ 2516 Minimum Cost [最小费用最大流]
题意略: 思路: 这题比较坑的地方是把每种货物单独建图分开算就ok了. #include<stdio.h> #include<queue> #define MAXN 500 # ...
- ubuntu关闭THP
所有linux系统详细设置参考: https://docs.mongodb.org/manual/tutorial/transparent-huge-pages/ vi /etc/init.d/dis ...
- Chapter Schema
Chapter Schema Schema是XF的核心,每一个读写方法都有一个相关联的Schema.方法首先解析Schema,然后再根据Schema的配置的执行. 那Schema是什么呢?Schema ...
- JQuery上传插件uploadify整理(Options)
下载 现在有两个版本了,我此次使用的依然是Flash版本的,虽然现在绝大部分浏览器都兼容HTMKL5,目前位置,除了做手机项目外,一般我们项目中不允许使用HTML5标签. 属性介绍(Options) ...
- 06-模仿系统的UIImageView
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 如何实现从Android第三方平台推送微信公众号
最近心血来潮,想要尝试写写有关实现Android平台第三方应用软件去跳转到微信平台的代码.我只是先暂时写写我的思路,如后期实现,便将主要代码附上. 微信公众平台官方宣布微信沟通接口正式上线,用户可以在 ...
- Bootstrap 3支持IE 8遇到的一个小问题
使用Bootstrap完成web的UI后,在IE 8运行时,发现.container等class的标签的的宽度并没按预期的宽度显示,本人已经根据bootstrap官方说明 http://getboot ...
- Maven 的41种骨架
1: internal -> appfuse-basic-jsf (创建一个基于Hibernate,Spring和JSF的Web应用程序的原型) 2: internal -> appfus ...
- 数学对象Math ceil()、floor()、round()方法
Math.ceil() 功能:对一个数进行上取整. 语法:Math.ceil(x) 参数: x:一个数值. 返回值:返回大于或等于x,并且与之最接近的整数. 注:如果x是正数,则把小数“入”: ...
- CSS3文字描边 CSS3字体外部描边
给需要实现文字描边的元素添加如下CSS3的属性 text-shadow:#000 1px 0 0,#000 0 1px 0,#000 -1px 0 0,#000 0 -1px 0; -webkit-t ...