关于CSS3的知识点（盒模型阴影、多列、direction）

本文介绍了CSS中的盒模型概念，包括border-box和content-box两种盒模型解析模式，并详细解释了盒阴影box-shadow属性的使用方法。此外还探讨了文字排列方向(direction)的设置以及如何运用多列布局(column-width等属性)实现类似报纸的排版效果。

盒模型：box-sizing

盒模型解析模式：

border-box：边框盒模型 width/height=border+padding+content

content-box：标准盒模型 width/height=content

盒模型阴影：box-shadow:[inset] x y blur [spread] color

参数：

[inset]：投影方式（默认为外投影，inset为内投影）

x、y：水平和垂直方向的阴影偏移

blur：模糊半径

[spread]：扩展阴影半径（先扩展原有形状，再开始画阴影）

Color：颜色

DOM文档中结构如下：

<div></div>

CSS样式如下:

div{
   width:100px;
   height:100px; 
   background-color:#0FF;
   margin:100px auto; 
   box-shadow:0 0 5px 20px black;
}

效果图如下：

direction：定义文字排列方式(全兼容)

rtl:从右向左排列

ltr:从左向右排列

注意要配合unicode-bidi:bidi-override; 一块使用

DOM文档中结构如下：

ltr:
<p id="ltr">文字按照从左到右的方向进行流动。</p>
rtl:
<p id="rtl">文字按照从右到左的方向进行流动。</p>

CSS样式如下:

p{
	width:300px;
	border:1px solid #000;
	}
#ltr{
	direction:ltr;
	unicode-bidi:bidi-override;
	}
#rtl{
	direction:rtl;
	unicode-bidi:bidi-override;
	}

效果图如下：

多列：将文本内容设计成像报纸一样的多列布局

column-width：指定列的宽度

column-count：要分的列数

column-gap：列之间的距离

column-rule：栏目间隔线（column-rule-style、column-rule-width和column-rule-color的集合样式）

column-rule-style：间隔线类型（hidden：定义隐藏规则/dotted：定义点状规则/dashed：定义虚线规则/solid：定义实线规则/double：定义双线规则）

DOM文档中结构如下：

<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>

CSS样式如下:

p{
	border:1px #000 solid; 
	width:800px;
	column-width:150px;
	column-count:4;
	column-rule:3px blue double;
	font-size:18px;
	}

效果图如下：