CSS图文排版裁切及滤镜的使用

摘要: 通过模仿QQ音乐界面的制作，已熟悉使用CSS,摘录部分使用不熟练的css功能。

1.图文排版

字符间距(中英文文字间): letter-spacing; 单词间距：word-spacing;

英文换行：word-break; 中文换行：word-wrap; 强制不换行：whitespace:nowrap,但此时文本会超出容器的范围。

文本产生省略号：前提是强制不换行，并且使用overflow属性，并取值为hidden,即裁剪超出部分。

然后使用text-overflow属 性，并取值为ellipsis; 代码示例如下：

#c{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

2.图片裁切

clip属性：对图片进行裁切，img属性必须绝对定位，方法：clip:rect(上 右 下 左偏移)；

margin属性：取负值；

css3属性：background-size : cover/100px/10%;

3.CSS滤镜

filter属性 使用方法：filter : 滤镜名称（滤镜参数）；

进行滤镜操作，必须先定义滤镜名称，滤镜名称包括 alpha blur chroma等；滤镜参数自己定制，以控制该滤镜的表现程度。

以blur用于图片模糊的滤镜为例，参数设置如下：

filter : blur(add = true/false, direction = 模糊方向，strength=模糊程度)；

其中，模糊方向：(0°表示垂直向上，45°为一个单位，默认向左的270°)；模糊程度：(取整数像素值，默认5px)。