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=" ...
随机推荐
-
Python 爬虫6——Scrapy的安装和使用
前面我们简述了使用Python自带的urllib和urllib2库完成的一下爬取网页数据的操作,但其实能完成的功能都很简单,假如要进行复制的数据匹配和高效的操作,可以引入第三方的框架,例如Scrapy ...
-
datatable list 之前相互转换
使用 FastMember: IEnumerable<SomeType> data = ... DataTable table = new DataTable(); using(var r ...
-
python 代码片段13
#coding=utf-8 # 条件转化 data=raw_input("enter 'y' or 'n'") if data[0]=='y': print "you t ...
-
hobby
如果把战争的原则凝缩为一个词,那就是集中. 人生有三把钥匙, 接受. 改变. 离开.不能接受,那就改变,不能改变,那就离开. 少问别人为什么,多问自己凭什么. 太平自古将军定,不许将军见太平
-
TreeView 读取 xml 显示节点
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Tree2_xml.aspx.c ...
-
浏览器兼容性判定写法格式(ie)
条件注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]> <!- ...
-
桌面小部件Wight父类AppWidgetProvider的三个方法
onUpdate()这个方法会在每次更新App Widget的时候调用,数据更新的逻辑都写在这个方法里边.而且要注意的是:在用户添加小部件的时候,会首先调用这个方法,应该在这个方法里进行初始化操作,比 ...
-
ionic框架
ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 An ...
-
处理html内容,获取纯文本
import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import java.util.rege ...
-
c++ STL map 结构体
Map是STL的一个关联容器,它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,它完成有可能在我们处理一对一数据的时候 ...