推荐阅读
  • CSS3 3D 转换

    [mystyle] #rotate2D,#rotate3D { width: 80px; height: 70px; color: white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 2D 转换

    CSS3 2D 转换 #rotate2D,#rotate3D { width:80px; height:70px; color:white; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin-righ

  • CSS3 文本效果

    #textshadow { text-shadow: 5px 5px 5px #FF0000; font-size:30px; } #wordwrap { width:11em; border:1px solid #000000; word-wrap:break-word; } #normal { width:11em; border:1

  • CSS3 动画

    [mystyle] #animated_div { width:76px; height:47px; background:#92B901; color:#ffffff; position:relative; font-weight:bold; font-size:20px; padding:10px; animation:animated_div 5s 1; -moz-animation:a

  • CSS3 边框

    CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop。 在本章中,您将了解以下的边框属性: border-radius box-shadow border-image CSS3 圆角 在 CSS2 中添加圆角棘手。我们不得不在每个角落使用不同的图像。 在 CSS3 中,很容易创建圆角。 在 CSS3

  • CSS3 过渡

    .animated_div { width:60px; height:40px; background:#92B901; color:#ffffff; position:absolute; font-weight:bold; font-size:15px; padding:10px; float:left; margin:5px; -webkit-transition:-webkit-transf

  • CSS3 圆角

    #rcorners1 { border-radius: 25px; background: #8AC007; padding: 20px; width: 200px; height: 150px; } #rcorners2 { border-radius: 25px; border: 2px solid #8AC007;

  • CSS3 简介

    CSS3 简介 CSS3 已完全向后兼容,所以你就不必改变现有的设计。 CSS3 模块 CSS3 被拆分为“模块”。旧规范已拆分成小块,还增加了新的。 一些最重要 CSS3 模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3 建议 W3C 的 CSS3 规范仍在开发。 但是,现在新的浏览器已经都支持 CSS3 属性。..

  • CSS3 渐变

    CSS3 渐变(Gradients) 渐变效果 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果。但是,通过使用 CSS3 渐变(gradients),你可以减少下载的时间和宽带的使用。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。 CSS3 定义了两种类型的渐变(gra

  • CSS3 图片

    CSS 图片 本章节将为大家介绍如何使用 CSS 来布局图片。 圆角图片 实例 圆角图片: img {    border-radius: 8px;} 尝试一下 » 实例 椭圆形图片: img {    border-radius: 50%;} 尝试一下 » 缩

CSS3 多列

CSS3 可以将文本内容设计成像报纸一样的多列布局,如下实例:

爱学习网教程 - 学的不仅是技术,更是梦想!爱学习网教程(www.lvstudy.com )提供了最全的编程技术基础教程, 介绍了HTML、CSS、Javascript、Python,Java,Ruby,C,PHP , MySQL等各种编程语言的基础知识。 同时本站中也提供了大量的在线实例,通过实例,您可以更好的学习编程。

浏览器支持

表格中的数字表示支持该方法的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

属性
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit11.1

CSS3 多列属性

本章节我们将学习以下几个 CSS3 的多列属性:

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

CSS3 创建多列

column-count 属性指定了需要分割的列数。

以下实例将 <div> 元素中的文本分为 3 列:


实例

div

{

	   

	-webkit-column-count: 3; /* Chrome, Safari, Opera */

   

-moz-column-count: 3; /* Firefox */

    column-count: 3;

}

CSS3 多列中列与列间的间隙

column-gap 属性指定了列与列间的间隙。

以下实例指定了列与列间的间隙为 40 像素:


实例

div

{

	   

	-webkit-column-gap: 40px; /* Chrome, Safari, Opera */

   

-moz-column-gap: 40px; /* Firefox */

   

column-gap: 40px;

}

CSS3 列边框

column-rule-style 属性指定了列与列间的边框样式:


实例

div

{

	   

	-webkit-column-rule-style: solid; /* Chrome, Safari, Opera */

   

-moz-column-rule-style: solid; /* Firefox */

   

column-rule-style: solid;

}

column-rule-width 属性指定了两列的边框厚度:


实例

div

{

	   

	-webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */

   

-moz-column-rule-width: 1px; /* Firefox */

   

column-rule-width: 1px;

}

column-rule-color 属性指定了两列的边框颜色:


实例

div

{

	   

	-webkit-column-rule-color: lightblue; /* Chrome, Safari, Opera */

   

-moz-column-rule-color: lightblue; /* Firefox */

   

column-rule-color: lightblue;

}

column-rule 属性是 column-rule-* 所有属性的简写。

以下实例设置了列直接的边框的厚度,样式及颜色:


实例

div

{

	   

	-webkit-column-rule: 1px solid lightblue; /* Chrome, Safari, Opera */

   

-moz-column-rule: 1px solid lightblue; /* Firefox */

   

column-rule: 1px solid lightblue;

}

指定元素跨越多少列

以下实例指定 <h2> 元素跨越所有列:


实例

h2 {

	   

	-webkit-column-span: all; /* Chrome, Safari, Opera */

   

column-span: all;

}

指定列的宽度

column-width 属性指定了列的宽度。


实例

	div {

	   

	-webkit-column-width: 100px; /* Chrome, Safari, Opera */

   

column-width: 100px;

}

CSS3 多列属性

下表列出了所有 CSS3 的多列属性:

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns column-width 与 column-count 的简写属性。
关于 免责声明 联系
Copyright © 2022 爱学习网 浙ICP备18049359号 网站地图 Google地图